1
00:00:00,040 --> 00:00:04,880
ever wondered how top designers create

2
00:00:02,280 --> 00:00:06,879
those clean modern websites in figma in

3
00:00:04,880 --> 00:00:09,559
this crash course I'll show you how to

4
00:00:06,879 --> 00:00:12,000
master figma's most powerful features

5
00:00:09,559 --> 00:00:14,719
from Auto layout and components to AI

6
00:00:12,000 --> 00:00:16,400
tools and prototyping in just 90 minutes

7
00:00:14,719 --> 00:00:18,439
you'll learn everything you need to

8
00:00:16,400 --> 00:00:21,199
start designing stunning websites and

9
00:00:18,439 --> 00:00:23,720
apps today no experience needed and if

10
00:00:21,199 --> 00:00:25,800
you're serious about mastering UI design

11
00:00:23,720 --> 00:00:27,519
and becoming a professional uiux

12
00:00:25,800 --> 00:00:29,400
designer you can check out my

13
00:00:27,519 --> 00:00:31,800
comprehensive UI design and figma

14
00:00:29,400 --> 00:00:34,559
Mastery course at the design mastery.com

15
00:00:31,800 --> 00:00:36,440
after watching this video so let's dive

16
00:00:34,559 --> 00:00:38,239
in all right first things first if

17
00:00:36,440 --> 00:00:41,879
you're new to figma and you have no

18
00:00:38,239 --> 00:00:41,879
account head over to figma

19
00:00:42,520 --> 00:00:47,360
docomo and you can sign up for free you

20
00:00:45,200 --> 00:00:50,239
can use figma on your browser or you can

21
00:00:47,360 --> 00:00:52,680
head over to the products right here and

22
00:00:50,239 --> 00:00:55,680
head over to the downloads page and from

23
00:00:52,680 --> 00:00:58,480
here just download the desktop app you

24
00:00:55,680 --> 00:01:00,399
can get it for Mac or Windows however I

25
00:00:58,480 --> 00:01:02,280
personally prefer to use the browser

26
00:01:00,399 --> 00:01:04,839
version of figma here you can see the

27
00:01:02,280 --> 00:01:06,520
pricing page as well for now if you're a

28
00:01:04,839 --> 00:01:08,119
beginner you don't need to have a paid

29
00:01:06,520 --> 00:01:10,159
account you can use the majority of

30
00:01:08,119 --> 00:01:11,960
figma features for free so make sure to

31
00:01:10,159 --> 00:01:14,280
create a free account and once you're

32
00:01:11,960 --> 00:01:16,240
logged in you'll land on the figma

33
00:01:14,280 --> 00:01:20,079
dashboard here on the left side you'll

34
00:01:16,240 --> 00:01:22,159
see recents then drafts trash all

35
00:01:20,079 --> 00:01:24,479
projects and right here at the bottom

36
00:01:22,159 --> 00:01:26,680
you'll see this explore Community button

37
00:01:24,479 --> 00:01:29,320
and on the right side you'll see these

38
00:01:26,680 --> 00:01:32,720
big buttons we have new design file new

39
00:01:29,320 --> 00:01:34,759
fig Jam board new slide deck and import

40
00:01:32,720 --> 00:01:36,960
and right here you can preview all your

41
00:01:34,759 --> 00:01:39,479
recently viewed projects if you head

42
00:01:36,960 --> 00:01:41,920
over to drafts you can start creating

43
00:01:39,479 --> 00:01:44,680
private projects you can organize all

44
00:01:41,920 --> 00:01:47,280
your projects right here you can also

45
00:01:44,680 --> 00:01:49,040
create a team from this drop- down menu

46
00:01:47,280 --> 00:01:51,640
if I just click on it you can create a

47
00:01:49,040 --> 00:01:53,880
new team you can give your team a name

48
00:01:51,640 --> 00:01:56,479
add team members to it and just start

49
00:01:53,880 --> 00:01:58,320
collaborating with other team members

50
00:01:56,479 --> 00:02:00,200
all right but for now we are not going

51
00:01:58,320 --> 00:02:03,640
to create a team here and if you're

52
00:02:00,200 --> 00:02:05,920
looking for inspiration UI kits design

53
00:02:03,640 --> 00:02:07,960
templates Etc you can head over to the

54
00:02:05,920 --> 00:02:10,000
community right here and here's where

55
00:02:07,960 --> 00:02:13,120
you can find different design resources

56
00:02:10,000 --> 00:02:15,080
such as plugins UI kits Etc we'll dive

57
00:02:13,120 --> 00:02:17,080
into it later but for now just keep in

58
00:02:15,080 --> 00:02:18,840
mind that there is a design community in

59
00:02:17,080 --> 00:02:20,879
figma all right now before we start

60
00:02:18,840 --> 00:02:23,560
creating a project let me show you how

61
00:02:20,879 --> 00:02:25,959
you can personalize your workspace all

62
00:02:23,560 --> 00:02:28,160
right so if I just head over to this top

63
00:02:25,959 --> 00:02:30,120
left menu and I click on it here I can

64
00:02:28,160 --> 00:02:32,640
change the theme if you prefer light

65
00:02:30,120 --> 00:02:34,879
mode you can easily set it to light if

66
00:02:32,640 --> 00:02:37,560
you prefer dark mode you can set it to

67
00:02:34,879 --> 00:02:39,920
dark or you can just leave it as system

68
00:02:37,560 --> 00:02:42,760
theme then you have settings you can

69
00:02:39,920 --> 00:02:44,680
also get the desktop app from here using

70
00:02:42,760 --> 00:02:46,599
this option and you can add different

71
00:02:44,680 --> 00:02:49,040
accounts here and switch between

72
00:02:46,599 --> 00:02:52,239
different accounts from this section all

73
00:02:49,040 --> 00:02:54,920
right so what about these buttons this

74
00:02:52,239 --> 00:02:57,239
first button the new design file button

75
00:02:54,920 --> 00:02:59,440
allows you to create a design file as

76
00:02:57,239 --> 00:03:01,480
its name suggests and that's basically

77
00:02:59,440 --> 00:03:03,640
the button we use almost all the time

78
00:03:01,480 --> 00:03:05,440
here we also have the new fig Jam board

79
00:03:03,640 --> 00:03:07,799
this is another product of figma it's

80
00:03:05,440 --> 00:03:10,080
basically a whiteboard for brainstorming

81
00:03:07,799 --> 00:03:11,920
Gathering your ideas Etc we're not going

82
00:03:10,080 --> 00:03:14,200
to discuss it in this video but keep in

83
00:03:11,920 --> 00:03:16,159
mind that it exists we also have this

84
00:03:14,200 --> 00:03:18,280
new slide deck button which allows you

85
00:03:16,159 --> 00:03:20,200
to create a presentation it's also

86
00:03:18,280 --> 00:03:21,799
another product of figma but what about

87
00:03:20,200 --> 00:03:23,920
this import button well if you want to

88
00:03:21,799 --> 00:03:27,159
import different design files into your

89
00:03:23,920 --> 00:03:28,760
dashboard you can use this import button

90
00:03:27,159 --> 00:03:31,519
however keep in mind that we don't use

91
00:03:28,760 --> 00:03:34,760
this button for importing assets like

92
00:03:31,519 --> 00:03:37,200
images or icons Etc okay this button

93
00:03:34,760 --> 00:03:39,799
exists to let you import design files

94
00:03:37,200 --> 00:03:42,159
like figma files or sketch files if

95
00:03:39,799 --> 00:03:44,040
you've used sketch which is another

96
00:03:42,159 --> 00:03:46,879
design software and you want to import

97
00:03:44,040 --> 00:03:48,720
your sketch file into figma you can use

98
00:03:46,879 --> 00:03:51,439
this button alternatively you can just

99
00:03:48,720 --> 00:03:53,280
drag and drop your files into your figma

100
00:03:51,439 --> 00:03:55,480
dashboard all right so that's all about

101
00:03:53,280 --> 00:03:57,840
the dashboard now let's go ahead and

102
00:03:55,480 --> 00:04:00,200
start creating our design file I'm going

103
00:03:57,840 --> 00:04:02,120
to hit this blue button here and I'll be

104
00:04:00,200 --> 00:04:04,480
taken to the figma editor here is where

105
00:04:02,120 --> 00:04:06,840
we design our projects generally we can

106
00:04:04,480 --> 00:04:09,840
divide this whole interface into four

107
00:04:06,840 --> 00:04:12,239
main sections we have the canvas which

108
00:04:09,840 --> 00:04:13,760
is this middle section this gray area

109
00:04:12,239 --> 00:04:16,639
right in the middle that's where we

110
00:04:13,760 --> 00:04:19,720
place our elements like frames shapes

111
00:04:16,639 --> 00:04:21,720
text pictures Etc basically we design

112
00:04:19,720 --> 00:04:24,160
everything right here then we have the

113
00:04:21,720 --> 00:04:26,600
navigation panel on the left side here

114
00:04:24,160 --> 00:04:28,840
we have the file section and the asset

115
00:04:26,600 --> 00:04:30,639
section right here under the file

116
00:04:28,840 --> 00:04:32,800
section we have we have two main

117
00:04:30,639 --> 00:04:35,759
sections we have pages and we have

118
00:04:32,800 --> 00:04:37,840
layers okay under the pages you can

119
00:04:35,759 --> 00:04:40,280
create different pages in order to

120
00:04:37,840 --> 00:04:42,120
organize your projects for instance you

121
00:04:40,280 --> 00:04:44,360
might need to create a design system for

122
00:04:42,120 --> 00:04:47,680
your project in that case you can hit

123
00:04:44,360 --> 00:04:49,919
this plus icon right here name it design

124
00:04:47,680 --> 00:04:51,840
system and you can start creating Your

125
00:04:49,919 --> 00:04:54,280
Design system right here and you can

126
00:04:51,840 --> 00:04:56,560
easily switch between these pages keep

127
00:04:54,280 --> 00:04:58,600
in mind that each page has its own

128
00:04:56,560 --> 00:05:01,320
canvas all right and here under the

129
00:04:58,600 --> 00:05:03,240
layers list you'll see all your layers

130
00:05:01,320 --> 00:05:05,080
we'll talk about layers in a few minutes

131
00:05:03,240 --> 00:05:08,479
but for now keep in mind that all your

132
00:05:05,080 --> 00:05:10,560
layers will be organized right here what

133
00:05:08,479 --> 00:05:13,560
about the assets tab here is where you

134
00:05:10,560 --> 00:05:15,520
can find your UI kits your components

135
00:05:13,560 --> 00:05:18,319
basically anything that's reusable will

136
00:05:15,520 --> 00:05:20,400
be organized right here for example here

137
00:05:18,319 --> 00:05:24,000
as you can see we have some default UI

138
00:05:20,400 --> 00:05:26,560
kits iOS 18 plus iPad OS 18 we also have

139
00:05:24,000 --> 00:05:28,840
material 3 design kit and this figma

140
00:05:26,560 --> 00:05:31,080
simple design system you can also add

141
00:05:28,840 --> 00:05:33,160
more Library is here you can even create

142
00:05:31,080 --> 00:05:35,240
your own Library if you have your own

143
00:05:33,160 --> 00:05:37,919
design system you can add it to your

144
00:05:35,240 --> 00:05:39,720
project using this option okay here we

145
00:05:37,919 --> 00:05:42,639
have libraries and from here you can

146
00:05:39,720 --> 00:05:45,000
just go ahead and add libraries to your

147
00:05:42,639 --> 00:05:47,039
project all right here right at the top

148
00:05:45,000 --> 00:05:49,199
you'll see the file name by default it's

149
00:05:47,039 --> 00:05:51,520
said to Untitled to rename it you can

150
00:05:49,199 --> 00:05:54,759
easily click on it and just change it

151
00:05:51,520 --> 00:05:57,440
let's change it to draft like this now

152
00:05:54,759 --> 00:05:59,319
if I click on this Arrow icon right here

153
00:05:57,440 --> 00:06:02,360
I'll see these menus such as show

154
00:05:59,319 --> 00:06:04,600
version history export add to sidebar

155
00:06:02,360 --> 00:06:06,440
create Branch etc for now we are not

156
00:06:04,600 --> 00:06:08,919
going to discuss these options as they

157
00:06:06,440 --> 00:06:10,960
are not that important right here if I

158
00:06:08,919 --> 00:06:13,720
just click on this figma icon I can

159
00:06:10,960 --> 00:06:15,759
access this files settings okay I can

160
00:06:13,720 --> 00:06:19,160
head over to file I can head over to

161
00:06:15,759 --> 00:06:21,280
edit view object text arrange Vector

162
00:06:19,160 --> 00:06:23,160
most of the time we won't need to adjust

163
00:06:21,280 --> 00:06:24,479
anything here but keep in mind that

164
00:06:23,160 --> 00:06:26,880
sometimes if you want to change the

165
00:06:24,479 --> 00:06:28,880
preferences of your project you can head

166
00:06:26,880 --> 00:06:31,440
over to the preferences right here and

167
00:06:28,880 --> 00:06:32,919
just enable or disable something just

168
00:06:31,440 --> 00:06:34,639
keep that in mind the next thing you

169
00:06:32,919 --> 00:06:37,599
need to keep in mind is that you can

170
00:06:34,639 --> 00:06:39,479
expand these panels just like that but

171
00:06:37,599 --> 00:06:41,520
also you can collapse them if you need

172
00:06:39,479 --> 00:06:43,840
more space for your project if I just

173
00:06:41,520 --> 00:06:46,720
click on this button it allows me to

174
00:06:43,840 --> 00:06:49,400
minimize UI just like this the next

175
00:06:46,720 --> 00:06:51,599
component of the editor is the toolbar

176
00:06:49,400 --> 00:06:54,720
right here at the bottom essentially the

177
00:06:51,599 --> 00:06:56,599
toolbar is a hub for all your design

178
00:06:54,720 --> 00:06:58,879
tools here you can find everything you

179
00:06:56,599 --> 00:07:02,080
need to design an interface here you can

180
00:06:58,879 --> 00:07:05,000
find the move tool hand tool scale then

181
00:07:02,080 --> 00:07:07,000
here we have frame section and slice

182
00:07:05,000 --> 00:07:08,720
here we have different shape tools we

183
00:07:07,000 --> 00:07:11,160
will talk about all these in a few

184
00:07:08,720 --> 00:07:13,560
minutes then we have the pen tool the

185
00:07:11,160 --> 00:07:16,280
text tool the comment tool and the

186
00:07:13,560 --> 00:07:18,280
actions panel and finally the dev mode

187
00:07:16,280 --> 00:07:20,680
and the last component of the editor is

188
00:07:18,280 --> 00:07:22,240
the properties panel on the right side

189
00:07:20,680 --> 00:07:24,319
here's where you can modify the

190
00:07:22,240 --> 00:07:26,400
properties of your elements currently

191
00:07:24,319 --> 00:07:28,680
since we haven't selected any elements

192
00:07:26,400 --> 00:07:31,160
we don't see all the properties here we

193
00:07:28,680 --> 00:07:33,440
only see the the page background color

194
00:07:31,160 --> 00:07:36,360
property which allows us to change the

195
00:07:33,440 --> 00:07:38,400
canvas background color okay just like

196
00:07:36,360 --> 00:07:40,840
that so when nothing is selected on the

197
00:07:38,400 --> 00:07:43,319
canvas here you will see all your local

198
00:07:40,840 --> 00:07:45,560
styles for example color styles text

199
00:07:43,319 --> 00:07:47,960
Styles Etc in addition to the design

200
00:07:45,560 --> 00:07:50,400
panel we also have the Prototype panel

201
00:07:47,960 --> 00:07:52,879
which allows us to create a prototype

202
00:07:50,400 --> 00:07:55,240
basically this panel allows us to create

203
00:07:52,879 --> 00:07:57,360
interactive elements for example if you

204
00:07:55,240 --> 00:07:59,840
want to make a button interactive you

205
00:07:57,360 --> 00:08:02,159
can use this prototype panel the last

206
00:07:59,840 --> 00:08:04,879
thing I'm going to mention here is this

207
00:08:02,159 --> 00:08:07,599
question mark icon right at the bottom

208
00:08:04,879 --> 00:08:09,599
right corner okay if I just click on it

209
00:08:07,599 --> 00:08:11,240
you'll see a few options if you want to

210
00:08:09,599 --> 00:08:14,000
learn more about figma keyboard

211
00:08:11,240 --> 00:08:15,560
shortcuts you can click on this option

212
00:08:14,000 --> 00:08:17,960
and here you'll have different

213
00:08:15,560 --> 00:08:22,479
categories of shortcuts for example we

214
00:08:17,960 --> 00:08:24,520
have Essentials tools view Zoom text Etc

215
00:08:22,479 --> 00:08:27,479
you can go through them and look for

216
00:08:24,520 --> 00:08:29,560
your specific needs and just learn them

217
00:08:27,479 --> 00:08:31,400
now if you've used figma before I'm

218
00:08:29,560 --> 00:08:34,039
pretty sure you're aware that figma has

219
00:08:31,400 --> 00:08:36,919
updated its interface from the ground up

220
00:08:34,039 --> 00:08:39,599
and currently we are using ui3 however

221
00:08:36,919 --> 00:08:42,039
if you want to use the old interface you

222
00:08:39,599 --> 00:08:44,680
can head over to this question mark and

223
00:08:42,039 --> 00:08:47,800
from here you can click on go back to

224
00:08:44,680 --> 00:08:50,600
previous UI and as soon as I do that as

225
00:08:47,800 --> 00:08:52,800
you can see the toolbar is repositioned

226
00:08:50,600 --> 00:08:55,800
and its place right at the top that's

227
00:08:52,800 --> 00:08:58,160
basically the old interface however for

228
00:08:55,800 --> 00:09:00,680
this video I'm just going to stick with

229
00:08:58,160 --> 00:09:02,279
ui3 which is is the latest figma

230
00:09:00,680 --> 00:09:04,720
interface all right now that you're

231
00:09:02,279 --> 00:09:07,040
familiar with the editor's interface

232
00:09:04,720 --> 00:09:09,600
let's start talking about all these

233
00:09:07,040 --> 00:09:11,560
tools right here in the toolbar these

234
00:09:09,600 --> 00:09:14,279
are basically the building blocks of

235
00:09:11,560 --> 00:09:16,240
your design so let's start with this one

236
00:09:14,279 --> 00:09:18,640
the frame tool and as soon as I select

237
00:09:16,240 --> 00:09:21,519
it on the right side I'll see these

238
00:09:18,640 --> 00:09:24,320
pre-built frames here we have phone we

239
00:09:21,519 --> 00:09:27,880
have Android compact we have iPhone 16

240
00:09:24,320 --> 00:09:31,160
16 Pro Etc then we have tablet desktop

241
00:09:27,880 --> 00:09:33,600
presentation watch page Etc okay you can

242
00:09:31,160 --> 00:09:35,680
use one of these pre-built frames if you

243
00:09:33,600 --> 00:09:38,720
want to for example I'm going to select

244
00:09:35,680 --> 00:09:41,720
iPhone 16 and as soon as I do that this

245
00:09:38,720 --> 00:09:43,920
new frame appears right here and also

246
00:09:41,720 --> 00:09:46,760
you can see that it's been added to my

247
00:09:43,920 --> 00:09:48,760
layers list right here and since it's

248
00:09:46,760 --> 00:09:50,880
selected you can see it's highlighted

249
00:09:48,760 --> 00:09:52,440
here in the layers list as well but what

250
00:09:50,880 --> 00:09:54,800
if you want to change the dimension of

251
00:09:52,440 --> 00:09:56,839
your frames you can simply select it

252
00:09:54,800 --> 00:09:59,440
head over to this drop- down menu right

253
00:09:56,839 --> 00:10:01,839
here and you can change it easily for

254
00:09:59,440 --> 00:10:04,320
example I can change it to iPhone 16 Pro

255
00:10:01,839 --> 00:10:07,360
instead of 16 so that's basically how

256
00:10:04,320 --> 00:10:09,920
you can create a pre-built frame however

257
00:10:07,360 --> 00:10:12,880
if you want to create a custom SCI frame

258
00:10:09,920 --> 00:10:15,240
what you can do is just hit F or a on

259
00:10:12,880 --> 00:10:17,600
your keyboard that's the shortcut for

260
00:10:15,240 --> 00:10:20,160
the frame tool you can see the shortcut

261
00:10:17,600 --> 00:10:21,600
appears right here next to the tool and

262
00:10:20,160 --> 00:10:24,440
then you can just click and drag

263
00:10:21,600 --> 00:10:27,760
somewhere like this and this way you can

264
00:10:24,440 --> 00:10:30,160
easily draw a custom siiz frame just

265
00:10:27,760 --> 00:10:32,279
like that so what are frames for frames

266
00:10:30,160 --> 00:10:34,480
allow you to define the boundaries of

267
00:10:32,279 --> 00:10:36,720
your design it could be a web page it

268
00:10:34,480 --> 00:10:38,920
could be a mobile application or even a

269
00:10:36,720 --> 00:10:41,040
UI component imagine you want to design

270
00:10:38,920 --> 00:10:43,160
a web page it could be a landing page

271
00:10:41,040 --> 00:10:45,279
the first thing you want to do is add a

272
00:10:43,160 --> 00:10:47,560
frame to your canvas and then you will

273
00:10:45,279 --> 00:10:49,560
start adding more and more elements to

274
00:10:47,560 --> 00:10:51,800
your frame so the frame allows us to

275
00:10:49,560 --> 00:10:54,639
specify the dimensions or let's say the

276
00:10:51,800 --> 00:10:56,959
boundaries of our design currently since

277
00:10:54,639 --> 00:10:58,760
this Frame is selected on the right side

278
00:10:56,959 --> 00:11:01,680
you can see that many properties

279
00:10:58,760 --> 00:11:03,480
appeared we have the position and here

280
00:11:01,680 --> 00:11:06,200
we have the alignments these are not

281
00:11:03,480 --> 00:11:09,000
enabled yet then we have the coordinates

282
00:11:06,200 --> 00:11:12,639
we have X Y then we have the rotation

283
00:11:09,000 --> 00:11:14,680
property and these flip options right

284
00:11:12,639 --> 00:11:16,680
underneath we have the layout section

285
00:11:14,680 --> 00:11:18,760
here is where you can Define the width

286
00:11:16,680 --> 00:11:20,320
and height of your frame essentially

287
00:11:18,760 --> 00:11:22,839
here is where you can Define the width

288
00:11:20,320 --> 00:11:25,040
and height of any element you select so

289
00:11:22,839 --> 00:11:28,240
here as you can see the width is set to

290
00:11:25,040 --> 00:11:30,800
349 if I want to change it what I can do

291
00:11:28,240 --> 00:11:34,320
is just select it and just typee in

292
00:11:30,800 --> 00:11:36,480
another value for example 500 hit enter

293
00:11:34,320 --> 00:11:38,440
and it will immediately change the same

294
00:11:36,480 --> 00:11:40,760
thing applies to the height property

295
00:11:38,440 --> 00:11:43,519
alternatively I can just hover over this

296
00:11:40,760 --> 00:11:46,560
withth property click and scrub just

297
00:11:43,519 --> 00:11:48,800
like this to decrease or increase the

298
00:11:46,560 --> 00:11:51,040
size but there is one more way to adjust

299
00:11:48,800 --> 00:11:53,639
the frame size you can simply hover over

300
00:11:51,040 --> 00:11:56,360
this blue line boundary like here and as

301
00:11:53,639 --> 00:11:59,600
soon as your cursor icon changes you can

302
00:11:56,360 --> 00:12:02,079
simply left click and drag to modify its

303
00:11:59,600 --> 00:12:04,360
width just like this all right good now

304
00:12:02,079 --> 00:12:06,760
to remove this Frame you can select it

305
00:12:04,360 --> 00:12:10,320
and hit delete on your keyboard now

306
00:12:06,760 --> 00:12:12,560
let's hit a or F to create another frame

307
00:12:10,320 --> 00:12:14,800
I'm going to head over to desktop and

308
00:12:12,560 --> 00:12:16,920
I'm just going to add a desktop frame

309
00:12:14,800 --> 00:12:19,560
just like this now you might ask how can

310
00:12:16,920 --> 00:12:22,000
I move around the canvas well it's so

311
00:12:19,560 --> 00:12:24,360
simple to move around the canvas you can

312
00:12:22,000 --> 00:12:27,440
hold down the space bar on your keyboard

313
00:12:24,360 --> 00:12:29,279
then left click and drag just like this

314
00:12:27,440 --> 00:12:31,160
okay if you want to zoom in or zoom out

315
00:12:29,279 --> 00:12:33,160
you can hold down the command or control

316
00:12:31,160 --> 00:12:36,000
key on your keyboard and then scroll

317
00:12:33,160 --> 00:12:38,160
using your mouse wheel just like this

318
00:12:36,000 --> 00:12:40,199
all right so here is our frame now let's

319
00:12:38,160 --> 00:12:42,279
discuss the other options here we have

320
00:12:40,199 --> 00:12:44,399
the section tool and the slice tool we

321
00:12:42,279 --> 00:12:47,160
use the section tool to organize our

322
00:12:44,399 --> 00:12:49,480
frames on the canvas let's say you have

323
00:12:47,160 --> 00:12:51,839
many frames for example you've designed

324
00:12:49,480 --> 00:12:53,279
many different pages for a mobile

325
00:12:51,839 --> 00:12:55,600
application and you just want to

326
00:12:53,279 --> 00:12:57,639
organize them to do that you can use the

327
00:12:55,600 --> 00:13:00,320
section tool and just left click and

328
00:12:57,639 --> 00:13:02,800
drag just like this and now as you can

329
00:13:00,320 --> 00:13:06,240
see we have this section one and our

330
00:13:02,800 --> 00:13:09,199
frame our desktop frame is placed inside

331
00:13:06,240 --> 00:13:11,720
the section one all right and if I just

332
00:13:09,199 --> 00:13:13,360
make it a bit bigger and let's say I

333
00:13:11,720 --> 00:13:15,680
want to add another frame I'm going to

334
00:13:13,360 --> 00:13:18,519
hit a on my keyboard and just draw

335
00:13:15,680 --> 00:13:21,240
another frame inside now both of these

336
00:13:18,519 --> 00:13:23,760
frames are placed inside this section

337
00:13:21,240 --> 00:13:26,000
and I can simply rename this section if

338
00:13:23,760 --> 00:13:29,440
I just double click here and just change

339
00:13:26,000 --> 00:13:30,720
it to desktop for instance okay okay

340
00:13:29,440 --> 00:13:32,639
it's quite useful when you want to

341
00:13:30,720 --> 00:13:34,560
organize many pages for instance let's

342
00:13:32,639 --> 00:13:36,839
say you designed a website and this

343
00:13:34,560 --> 00:13:39,880
website has different breakpoints for

344
00:13:36,839 --> 00:13:41,760
example desktop tablet and mobile what

345
00:13:39,880 --> 00:13:44,079
you can do is just create three

346
00:13:41,760 --> 00:13:46,279
different sections call them desktop

347
00:13:44,079 --> 00:13:48,720
tablet and mobile and just place all the

348
00:13:46,279 --> 00:13:51,199
desktop frames in the desktop section

349
00:13:48,720 --> 00:13:53,079
all the tablet frames in the tablet and

350
00:13:51,199 --> 00:13:55,399
all the mobile frames in the mobile

351
00:13:53,079 --> 00:13:57,360
section this way you can make sure that

352
00:13:55,399 --> 00:13:59,959
everything is understandable and is

353
00:13:57,360 --> 00:14:02,759
clear to work with okay so that's

354
00:13:59,959 --> 00:14:04,880
basically how the section works we also

355
00:14:02,759 --> 00:14:07,600
have the slice tool which allows you to

356
00:14:04,880 --> 00:14:09,199
select a specific portion of an element

357
00:14:07,600 --> 00:14:10,959
and Export it we are not going to

358
00:14:09,199 --> 00:14:13,519
discuss it now all right now let's get

359
00:14:10,959 --> 00:14:15,720
rid of this desktop section and just add

360
00:14:13,519 --> 00:14:17,720
another frame you know what to do hit a

361
00:14:15,720 --> 00:14:20,279
on your keyboard and just select one of

362
00:14:17,720 --> 00:14:22,639
these pre-built frames like that and now

363
00:14:20,279 --> 00:14:24,279
it's time to move on to the shape tools

364
00:14:22,639 --> 00:14:26,320
here as you can see we have many

365
00:14:24,279 --> 00:14:30,040
different primitive shape tools we have

366
00:14:26,320 --> 00:14:32,680
rectangle line Arrow ellipse polygon

367
00:14:30,040 --> 00:14:35,199
star and we also have this image video

368
00:14:32,680 --> 00:14:37,560
element these are the most basic

369
00:14:35,199 --> 00:14:39,519
building blocks of any design usually

370
00:14:37,560 --> 00:14:42,639
when you want to design an interface you

371
00:14:39,519 --> 00:14:45,160
use these shapes a lot a rectangle line

372
00:14:42,639 --> 00:14:47,519
ellipse polygon Etc and again you can

373
00:14:45,160 --> 00:14:50,120
find the shortcut for each one of these

374
00:14:47,519 --> 00:14:52,079
shape tools right next to it okay so

375
00:14:50,120 --> 00:14:54,480
let's start with the rectangle I'm going

376
00:14:52,079 --> 00:14:56,639
to select it to draw a rectangle just

377
00:14:54,480 --> 00:14:59,519
like frames you can just left click

378
00:14:56,639 --> 00:15:02,000
somewhere and drag just like that so now

379
00:14:59,519 --> 00:15:04,320
I just drew this rectangle and as you

380
00:15:02,000 --> 00:15:08,759
can see the dimension is set to

381
00:15:04,320 --> 00:15:11,519
362 by 381 pixels but what if you want

382
00:15:08,759 --> 00:15:13,720
to create a perfect square well in that

383
00:15:11,519 --> 00:15:15,519
case what we need to do is select the

384
00:15:13,720 --> 00:15:17,759
shape tool hold down the shift key on

385
00:15:15,519 --> 00:15:19,440
your keyboard left click and drag this

386
00:15:17,759 --> 00:15:21,639
way as you can see the width and height

387
00:15:19,440 --> 00:15:24,199
of this shape are the same allowing us

388
00:15:21,639 --> 00:15:26,480
to create a perfect square okay and it

389
00:15:24,199 --> 00:15:29,040
works for all shapes keep that in mind

390
00:15:26,480 --> 00:15:31,360
all right now that we have this shape

391
00:15:29,040 --> 00:15:33,519
let's see what kind of properties we

392
00:15:31,360 --> 00:15:36,240
have here on the right side since this

393
00:15:33,519 --> 00:15:38,519
object is selected you can see different

394
00:15:36,240 --> 00:15:40,959
properties here we have the position

395
00:15:38,519 --> 00:15:43,440
properties like the alignment if you

396
00:15:40,959 --> 00:15:45,519
want to align this object to the left

397
00:15:43,440 --> 00:15:47,600
you can simply hit this one if you want

398
00:15:45,519 --> 00:15:49,480
to align it to the center you can simply

399
00:15:47,600 --> 00:15:51,880
hit this one these are the horizontal

400
00:15:49,480 --> 00:15:54,199
alignments and these are the vertical

401
00:15:51,880 --> 00:15:56,680
alignments all right you can align your

402
00:15:54,199 --> 00:15:58,959
elements vertically and horizontally and

403
00:15:56,680 --> 00:16:01,480
here we have the X and Y coordinates if

404
00:15:58,959 --> 00:16:03,440
if I set it to 0er and zero you will see

405
00:16:01,480 --> 00:16:06,319
that it will be placed on the top left

406
00:16:03,440 --> 00:16:09,399
corner of this Frame which is the parent

407
00:16:06,319 --> 00:16:12,160
of this rectangle as you can see here we

408
00:16:09,399 --> 00:16:14,600
have this rectangle inside this desktop

409
00:16:12,160 --> 00:16:16,600
frame this desktop frame is the parent

410
00:16:14,600 --> 00:16:18,600
of this element and this rectangle is

411
00:16:16,600 --> 00:16:21,160
the child of this desktop frame all

412
00:16:18,600 --> 00:16:23,399
right so that's how the coordinates work

413
00:16:21,160 --> 00:16:25,199
right underneath we have the constraints

414
00:16:23,399 --> 00:16:27,759
we're going to discuss this option a bit

415
00:16:25,199 --> 00:16:29,680
later because it's a bit more advanced

416
00:16:27,759 --> 00:16:32,079
next we have the rotation property which

417
00:16:29,680 --> 00:16:34,440
allows you to rotate your object just

418
00:16:32,079 --> 00:16:37,680
like that you can use these options as

419
00:16:34,440 --> 00:16:39,639
well flip horizontal flip vertical I'm

420
00:16:37,680 --> 00:16:41,480
going to set it to zero and underneath

421
00:16:39,639 --> 00:16:44,199
we have the layout we already discussed

422
00:16:41,480 --> 00:16:46,959
it we have the width height and here we

423
00:16:44,199 --> 00:16:48,720
have this icon which says lo aspect

424
00:16:46,959 --> 00:16:51,040
ratio all right so let's say I'm going

425
00:16:48,720 --> 00:16:54,160
to resize this element if I just left

426
00:16:51,040 --> 00:16:56,839
click here and drag I can freely adjust

427
00:16:54,160 --> 00:16:58,519
its width and height however if you want

428
00:16:56,839 --> 00:17:00,639
to make sure that you maintain the

429
00:16:58,519 --> 00:17:03,279
aspect ratio of this shape when you're

430
00:17:00,639 --> 00:17:05,880
resizing it you can just lock the aspect

431
00:17:03,279 --> 00:17:09,439
ratio using this icon I'm going to lock

432
00:17:05,880 --> 00:17:11,640
it now and then if I try to resize it as

433
00:17:09,439 --> 00:17:13,520
you can see the aspect ratio is

434
00:17:11,640 --> 00:17:15,319
maintained which is a quite helpful

435
00:17:13,520 --> 00:17:17,720
option especially when it comes to

436
00:17:15,319 --> 00:17:20,280
resizing images the next property we're

437
00:17:17,720 --> 00:17:23,439
going to discuss is the appearance here

438
00:17:20,280 --> 00:17:25,439
we have the opacity property and also we

439
00:17:23,439 --> 00:17:27,760
have the corner radius the opacity

440
00:17:25,439 --> 00:17:31,480
property allows you to make an element

441
00:17:27,760 --> 00:17:33,600
transparent by default it's set to 100%

442
00:17:31,480 --> 00:17:36,480
which means that we have no transparency

443
00:17:33,600 --> 00:17:39,039
however if I try to decrease this value

444
00:17:36,480 --> 00:17:41,360
like this this shape will become more

445
00:17:39,039 --> 00:17:43,520
and more transparent to show you how it

446
00:17:41,360 --> 00:17:46,400
really works I'm going to need another

447
00:17:43,520 --> 00:17:49,000
shape all right let me create another

448
00:17:46,400 --> 00:17:51,400
rectangle right here and as you can see

449
00:17:49,000 --> 00:17:53,840
we have rectangle three here which is

450
00:17:51,400 --> 00:17:56,159
placed above rectangle two in the layers

451
00:17:53,840 --> 00:17:57,840
list I'm going to bring it down we'll

452
00:17:56,159 --> 00:18:00,360
talk about the layers list and how it

453
00:17:57,840 --> 00:18:02,760
works in a few minutes but for now I'm

454
00:18:00,360 --> 00:18:05,360
going to make sure that this rectangle 2

455
00:18:02,760 --> 00:18:07,480
is placed on top of rectangle 3 and

456
00:18:05,360 --> 00:18:09,280
while this rectangle 2 is selected I'm

457
00:18:07,480 --> 00:18:13,080
going to decrease the opacity and look

458
00:18:09,280 --> 00:18:15,559
what happens you see now this element is

459
00:18:13,080 --> 00:18:18,240
transparent and we can see through it so

460
00:18:15,559 --> 00:18:19,840
that's how the opacity property works

461
00:18:18,240 --> 00:18:22,960
I'm going to get rid of this rectangle

462
00:18:19,840 --> 00:18:26,000
three and set the opacity to

463
00:18:22,960 --> 00:18:28,400
100% And then the next property is

464
00:18:26,000 --> 00:18:31,080
Corner radius this property allows you

465
00:18:28,400 --> 00:18:33,039
to make your elements rounded here as

466
00:18:31,080 --> 00:18:35,240
you can see we have sharp Corners if you

467
00:18:33,039 --> 00:18:38,559
want to make your Corners rounded you

468
00:18:35,240 --> 00:18:41,120
can just increase this value like that

469
00:18:38,559 --> 00:18:43,679
all right alternatively you can just

470
00:18:41,120 --> 00:18:46,200
hover over these areas and you'll see

471
00:18:43,679 --> 00:18:49,280
the radius property appears if I just

472
00:18:46,200 --> 00:18:51,760
left click on this node and drag I can

473
00:18:49,280 --> 00:18:53,799
increase the corner radius easily if I

474
00:18:51,760 --> 00:18:55,960
want to modify the corner radius of one

475
00:18:53,799 --> 00:18:58,400
corner what I can do is just hold down

476
00:18:55,960 --> 00:19:00,919
the alt or option key on my keyboard and

477
00:18:58,400 --> 00:19:02,159
just left click and drag just like that

478
00:19:00,919 --> 00:19:04,559
if you want to increase the corner

479
00:19:02,159 --> 00:19:06,760
radius value incrementally you can hold

480
00:19:04,559 --> 00:19:08,559
down the shift key on your keyboard left

481
00:19:06,760 --> 00:19:10,840
click and drag right next to this

482
00:19:08,559 --> 00:19:13,039
property we have this option as well

483
00:19:10,840 --> 00:19:15,280
which says individual Corners if I just

484
00:19:13,039 --> 00:19:18,159
click on it let's say you want this

485
00:19:15,280 --> 00:19:20,760
corner to be sharp what you can do is

486
00:19:18,159 --> 00:19:23,280
set this corner to zero however since we

487
00:19:20,760 --> 00:19:25,559
flipped this shape now this corner is

488
00:19:23,280 --> 00:19:27,600
changed because we already flipped it

489
00:19:25,559 --> 00:19:29,159
I'm going to flip it once again and now

490
00:19:27,600 --> 00:19:31,919
it's correct if I want want to increase

491
00:19:29,159 --> 00:19:34,440
the corner radius of this corner I can

492
00:19:31,919 --> 00:19:36,600
simply left click and scrub all right

493
00:19:34,440 --> 00:19:39,480
great now if you want to hide an element

494
00:19:36,600 --> 00:19:41,440
what you can do is click on this option

495
00:19:39,480 --> 00:19:43,320
okay you can simply hide it

496
00:19:41,440 --> 00:19:45,039
alternatively you can head over to the

497
00:19:43,320 --> 00:19:46,960
layers list and as soon as you hover

498
00:19:45,039 --> 00:19:49,080
over this layer you will see these two

499
00:19:46,960 --> 00:19:51,080
icons the lock icon which allows you to

500
00:19:49,080 --> 00:19:52,840
lock this element so if you want to make

501
00:19:51,080 --> 00:19:55,120
sure that you don't accidentally move

502
00:19:52,840 --> 00:19:57,080
your layers around or you accidentally

503
00:19:55,120 --> 00:19:59,400
select it on the canvas you can just

504
00:19:57,080 --> 00:20:02,280
lock it if you want to hide it or unhide

505
00:19:59,400 --> 00:20:04,000
it you can just use this icon the next

506
00:20:02,280 --> 00:20:05,960
property we are going to discuss is the

507
00:20:04,000 --> 00:20:08,120
Field property which allows you to

508
00:20:05,960 --> 00:20:09,880
change the color of your elements if I

509
00:20:08,120 --> 00:20:12,000
click here you'll see that this window

510
00:20:09,880 --> 00:20:14,840
pops up and here we can pick our desired

511
00:20:12,000 --> 00:20:16,720
color I can simply use this color pick

512
00:20:14,840 --> 00:20:19,280
here and just change it to whatever I

513
00:20:16,720 --> 00:20:21,600
want I can change the Hue here I can

514
00:20:19,280 --> 00:20:25,000
change the opacity here remember the

515
00:20:21,600 --> 00:20:26,840
Field property also has its own opacity

516
00:20:25,000 --> 00:20:28,720
property just like what we've discussed

517
00:20:26,840 --> 00:20:30,600
here so you can make your color

518
00:20:28,720 --> 00:20:35,159
transparent then here we have different

519
00:20:30,600 --> 00:20:37,400
color modes we have hex RGB CSS hsl HSP

520
00:20:35,159 --> 00:20:39,360
and here you'll see all your saved

521
00:20:37,400 --> 00:20:41,880
colors if you want to pick a color from

522
00:20:39,360 --> 00:20:44,280
your canvas you can use this ey dropper

523
00:20:41,880 --> 00:20:46,559
and just choose your desired color on

524
00:20:44,280 --> 00:20:48,799
the canvas right here at the top we have

525
00:20:46,559 --> 00:20:51,520
this libraries option as well if you

526
00:20:48,799 --> 00:20:53,640
have color styles saved you'll see all

527
00:20:51,520 --> 00:20:55,919
your color styles right here but what

528
00:20:53,640 --> 00:20:59,240
are these options when it comes to the

529
00:20:55,919 --> 00:21:01,520
field property we have four options here

530
00:20:59,240 --> 00:21:04,000
we have the solid option which allows

531
00:21:01,520 --> 00:21:06,360
you to pick one single color then we

532
00:21:04,000 --> 00:21:08,440
also have gradient which is basically a

533
00:21:06,360 --> 00:21:10,159
transition from one color to another

534
00:21:08,440 --> 00:21:12,679
color here as you can see we have two

535
00:21:10,159 --> 00:21:16,960
colors we can just modify their position

536
00:21:12,679 --> 00:21:19,279
like that we have two stops 0% 100% you

537
00:21:16,960 --> 00:21:21,279
can adjust the gradient stop position

538
00:21:19,279 --> 00:21:24,320
right here and also you can add more

539
00:21:21,279 --> 00:21:27,080
colors here if I just hit this plus icon

540
00:21:24,320 --> 00:21:29,559
I'll add another stop and I can simply

541
00:21:27,080 --> 00:21:32,200
click on it and adjust just the color

542
00:21:29,559 --> 00:21:34,520
just like that and again you'll have the

543
00:21:32,200 --> 00:21:36,760
opacity property here as well so you can

544
00:21:34,520 --> 00:21:39,080
make your colors transparent but you can

545
00:21:36,760 --> 00:21:41,640
also control the direction of your

546
00:21:39,080 --> 00:21:43,679
gradient using these handles as simple

547
00:21:41,640 --> 00:21:46,320
as that if you want to rotate or flip

548
00:21:43,679 --> 00:21:48,880
your gradient you can use these options

549
00:21:46,320 --> 00:21:51,559
here we have flip gradient we also have

550
00:21:48,880 --> 00:21:53,919
rotate gradient just like this we are

551
00:21:51,559 --> 00:21:56,039
not limited to only one type of gradient

552
00:21:53,919 --> 00:21:58,000
currently we are using the linear

553
00:21:56,039 --> 00:21:59,159
gradient which is the most popular type

554
00:21:58,000 --> 00:22:03,000
of gradient

555
00:21:59,159 --> 00:22:04,400
but we also have radial like this we

556
00:22:03,000 --> 00:22:07,200
have

557
00:22:04,400 --> 00:22:09,960
angular like that and we also have

558
00:22:07,200 --> 00:22:12,320
Diamond which looks like this but as I

559
00:22:09,960 --> 00:22:14,320
said most of the time we use the linear

560
00:22:12,320 --> 00:22:17,360
gradient the next thing we have here is

561
00:22:14,320 --> 00:22:19,880
image so if I click on this it allows me

562
00:22:17,360 --> 00:22:22,039
to upload an image from my computer and

563
00:22:19,880 --> 00:22:24,640
that image will be placed inside my

564
00:22:22,039 --> 00:22:27,120
shape we'll talk about images later we

565
00:22:24,640 --> 00:22:29,240
can also add a video to our shapes if we

566
00:22:27,120 --> 00:22:32,080
use this option however this particular

567
00:22:29,240 --> 00:22:33,600
option is only available to paid users

568
00:22:32,080 --> 00:22:36,520
now the next property we are going to

569
00:22:33,600 --> 00:22:38,840
discuss is stroke stroke allows you to

570
00:22:36,520 --> 00:22:40,559
add borders to your elements if I just

571
00:22:38,840 --> 00:22:43,360
hit this plus button you will see that

572
00:22:40,559 --> 00:22:45,720
now we have this very slam border around

573
00:22:43,360 --> 00:22:47,840
our rectangle all right you can control

574
00:22:45,720 --> 00:22:50,760
the thickness of your border using this

575
00:22:47,840 --> 00:22:52,760
property here just like that and you can

576
00:22:50,760 --> 00:22:55,760
also decide whether this border should

577
00:22:52,760 --> 00:22:57,679
be added inside your element like this

578
00:22:55,760 --> 00:22:59,960
or it should be added outside your

579
00:22:57,679 --> 00:23:02,320
element or it should be placed right at

580
00:22:59,960 --> 00:23:04,120
the center we can also change its color

581
00:23:02,320 --> 00:23:06,320
just like what we've discussed right

582
00:23:04,120 --> 00:23:08,720
here and you can add a gradient to it

583
00:23:06,320 --> 00:23:10,919
you can add an image or video whatever

584
00:23:08,720 --> 00:23:13,200
you like now when it comes to stroke we

585
00:23:10,919 --> 00:23:15,440
also have some Advanced options if I

586
00:23:13,200 --> 00:23:17,039
just click on Advanced stroke settings

587
00:23:15,440 --> 00:23:19,919
you will see that we have the stroke

588
00:23:17,039 --> 00:23:22,159
style here by default it's set to solid

589
00:23:19,919 --> 00:23:24,880
you can change it to dash if you want to

590
00:23:22,159 --> 00:23:27,440
get a dashed stroke a dashed border

591
00:23:24,880 --> 00:23:29,960
around your shape and you can change

592
00:23:27,440 --> 00:23:33,000
these values here for example I can set

593
00:23:29,960 --> 00:23:35,120
it to 10 I can set the Gap as well I'm

594
00:23:33,000 --> 00:23:38,000
going to set it to 30 you can change the

595
00:23:35,120 --> 00:23:41,440
dash cap currently it's set To None we

596
00:23:38,000 --> 00:23:43,960
have square we have round as well you

597
00:23:41,440 --> 00:23:46,919
can change the join as well you can set

598
00:23:43,960 --> 00:23:49,000
it to Bevel or round now if you want to

599
00:23:46,919 --> 00:23:51,360
add a border to only one side of your

600
00:23:49,000 --> 00:23:54,760
shape we can use this option if I just

601
00:23:51,360 --> 00:23:58,440
click on it I can by default it's set to

602
00:23:54,760 --> 00:24:02,120
all I can add it to top I can add it to

603
00:23:58,440 --> 00:24:04,600
to bottom I can add it to left right or

604
00:24:02,120 --> 00:24:06,919
I can use this custom option and just

605
00:24:04,600 --> 00:24:08,600
specify it like this the other thing I'm

606
00:24:06,919 --> 00:24:11,480
going to mention here is that you're not

607
00:24:08,600 --> 00:24:13,799
limited to only one stroke or one F you

608
00:24:11,480 --> 00:24:16,679
can add as many colors or as many

609
00:24:13,799 --> 00:24:18,919
borders as you like to your element

610
00:24:16,679 --> 00:24:21,159
using this plus icon if I want to add

611
00:24:18,919 --> 00:24:23,039
another fill on top of this color I can

612
00:24:21,159 --> 00:24:25,320
hit this plus icon and as you can see

613
00:24:23,039 --> 00:24:28,039
now we have this dark overlay I can

614
00:24:25,320 --> 00:24:30,279
change it and I can come up with my own

615
00:24:28,039 --> 00:24:32,279
color combination here I can adjust the

616
00:24:30,279 --> 00:24:34,799
transparency of this color if I just

617
00:24:32,279 --> 00:24:37,279
increase it to 100% you will see that

618
00:24:34,799 --> 00:24:40,399
this bottom color is not visible because

619
00:24:37,279 --> 00:24:42,240
it's placed right under this Top Field

620
00:24:40,399 --> 00:24:45,039
if you want to change the order of these

621
00:24:42,240 --> 00:24:47,559
colors you can hover over this area and

622
00:24:45,039 --> 00:24:50,440
as soon as your cursor's icon changes to

623
00:24:47,559 --> 00:24:53,120
this hand icon you can just left click

624
00:24:50,440 --> 00:24:55,520
and just drag it up just like that so

625
00:24:53,120 --> 00:24:58,840
keep that in mind the same thing applies

626
00:24:55,520 --> 00:25:01,399
to all these properties Okay so so I can

627
00:24:58,840 --> 00:25:03,600
add one more border to this shape or

628
00:25:01,399 --> 00:25:06,440
even more and now it's time to move on

629
00:25:03,600 --> 00:25:08,120
to the next property which is effects

630
00:25:06,440 --> 00:25:10,440
the effects property as you can guess

631
00:25:08,120 --> 00:25:12,520
from its name allows you to add some

632
00:25:10,440 --> 00:25:15,240
effects to your element it could be a

633
00:25:12,520 --> 00:25:17,480
drop shadow it could be an inner Shadow

634
00:25:15,240 --> 00:25:20,240
layer blare and background blare so

635
00:25:17,480 --> 00:25:22,480
let's start with the drop shadow here by

636
00:25:20,240 --> 00:25:24,880
default it's set to drop shadow and if I

637
00:25:22,480 --> 00:25:27,840
want to change its properties I can just

638
00:25:24,880 --> 00:25:30,720
click on this option effect settings and

639
00:25:27,840 --> 00:25:33,559
it allows me to change the position like

640
00:25:30,720 --> 00:25:36,159
that the X and Y coordinates it allows

641
00:25:33,559 --> 00:25:38,080
me to change the blare property so

642
00:25:36,159 --> 00:25:40,399
basically here we can change the Blair

643
00:25:38,080 --> 00:25:43,039
radius then we have the spread property

644
00:25:40,399 --> 00:25:45,720
as well just like that you can change

645
00:25:43,039 --> 00:25:47,640
the color you can set the opacity here

646
00:25:45,720 --> 00:25:50,039
and that's basically how we add Shadows

647
00:25:47,640 --> 00:25:51,960
to our elements but we can also use

648
00:25:50,039 --> 00:25:54,159
inner Shadows if I just change it to

649
00:25:51,960 --> 00:25:57,559
Inner Shadow you will see that now the

650
00:25:54,159 --> 00:26:00,000
shadow is placed inside our shape most

651
00:25:57,559 --> 00:26:01,799
of the time we don't use this option

652
00:26:00,000 --> 00:26:04,000
however if you want to create some

653
00:26:01,799 --> 00:26:06,360
specific effects for example glass

654
00:26:04,000 --> 00:26:08,840
morphism or something like that you

655
00:26:06,360 --> 00:26:10,960
would need to use the inner Shadow what

656
00:26:08,840 --> 00:26:13,880
about these two properties layer blare

657
00:26:10,960 --> 00:26:16,480
and background blare well imagine you

658
00:26:13,880 --> 00:26:18,520
want to make this shape blury if you

659
00:26:16,480 --> 00:26:21,440
want to do that you can simply add a

660
00:26:18,520 --> 00:26:24,559
layer blare property to it and just

661
00:26:21,440 --> 00:26:26,720
increase the blare property just like

662
00:26:24,559 --> 00:26:28,520
that but what about the background blare

663
00:26:26,720 --> 00:26:31,399
well if I set it to background blare

664
00:26:28,520 --> 00:26:33,440
you'll see that nothing happens well

665
00:26:31,399 --> 00:26:35,799
that's because in order for this option

666
00:26:33,440 --> 00:26:39,320
to work first we need to have another

667
00:26:35,799 --> 00:26:42,159
element placed behind this object so let

668
00:26:39,320 --> 00:26:45,480
me go ahead and add another shape maybe

669
00:26:42,159 --> 00:26:47,240
an ellipse like that left click and drag

670
00:26:45,480 --> 00:26:49,679
I'm going to hold on the shift key to

671
00:26:47,240 --> 00:26:52,840
create Perfect Circle and I'm going to

672
00:26:49,679 --> 00:26:54,720
place it right under this rectangle two

673
00:26:52,840 --> 00:26:57,159
in the layers list now I'm going to

674
00:26:54,720 --> 00:26:59,640
select this rectangle and I'm going to

675
00:26:57,159 --> 00:27:01,600
increase the background blare like that

676
00:26:59,640 --> 00:27:03,640
again nothing happens there is one more

677
00:27:01,600 --> 00:27:05,520
thing we need to do to make this work

678
00:27:03,640 --> 00:27:08,000
and that is decreasing the opacity of

679
00:27:05,520 --> 00:27:10,559
our field not the appearance but our

680
00:27:08,000 --> 00:27:13,399
feel so if I just decrease it here to

681
00:27:10,559 --> 00:27:17,760
50% and I just decrease the blare amount

682
00:27:13,399 --> 00:27:20,559
here a bit you'll see that now it

683
00:27:17,760 --> 00:27:22,760
works you see it allows us to create

684
00:27:20,559 --> 00:27:25,720
this kind of glass effect so that's

685
00:27:22,760 --> 00:27:27,679
basically how this option works now let

686
00:27:25,720 --> 00:27:31,399
me get rid of this effect and just

687
00:27:27,679 --> 00:27:33,320
increase the opacity here to 100% all

688
00:27:31,399 --> 00:27:35,320
right and I'm just going to get rid of

689
00:27:33,320 --> 00:27:38,159
this ellipse and the next option we are

690
00:27:35,320 --> 00:27:40,240
going to discuss is the export option

691
00:27:38,159 --> 00:27:43,360
well this option allows you to add an

692
00:27:40,240 --> 00:27:45,760
export setting to a frame or to any

693
00:27:43,360 --> 00:27:48,240
selected element it could be a frame it

694
00:27:45,760 --> 00:27:50,240
could be a shape whatever it might be so

695
00:27:48,240 --> 00:27:52,840
here I'm going to select this rectangle

696
00:27:50,240 --> 00:27:54,679
and just add an export setting to it and

697
00:27:52,840 --> 00:27:57,440
here we have different properties like

698
00:27:54,679 --> 00:27:59,559
the scale by default it's set to 1 x you

699
00:27:57,440 --> 00:28:01,919
can increase it to 2x basically when

700
00:27:59,559 --> 00:28:04,159
it's set to 1x and you export this

701
00:28:01,919 --> 00:28:07,600
particular shape the final dimension of

702
00:28:04,159 --> 00:28:09,559
your exported file will be 400 by 500

703
00:28:07,600 --> 00:28:12,360
but if you want to make sure that you'll

704
00:28:09,559 --> 00:28:15,240
get a higher quality shape you can set

705
00:28:12,360 --> 00:28:17,880
it to 2X and then the final file will be

706
00:28:15,240 --> 00:28:19,799
much larger the width will be 800 and

707
00:28:17,880 --> 00:28:22,399
the height will be 1,000 and then we

708
00:28:19,799 --> 00:28:25,760
have different file formats we have PNG

709
00:28:22,399 --> 00:28:27,519
jpeg SVG and PDF and here we have some

710
00:28:25,760 --> 00:28:29,919
Advanced options that we are not going

711
00:28:27,519 --> 00:28:32,679
to discuss and finally you can preview

712
00:28:29,919 --> 00:28:34,960
what you're exporting and hit export to

713
00:28:32,679 --> 00:28:37,039
export that file so that's basically the

714
00:28:34,960 --> 00:28:39,799
general properties each element has in

715
00:28:37,039 --> 00:28:42,799
figma we have position layout appearance

716
00:28:39,799 --> 00:28:44,320
feel stroke effects and Export however

717
00:28:42,799 --> 00:28:46,240
keep in mind that some elements have

718
00:28:44,320 --> 00:28:48,080
their own unique properties that we are

719
00:28:46,240 --> 00:28:49,559
going to discuss in a second all right

720
00:28:48,080 --> 00:28:52,240
now that you're familiar with the

721
00:28:49,559 --> 00:28:54,679
properties you can modify for each shape

722
00:28:52,240 --> 00:28:57,399
let's head over to the next shape right

723
00:28:54,679 --> 00:28:59,519
here which is going to be line so to

724
00:28:57,399 --> 00:29:02,240
create a simple line you can just select

725
00:28:59,519 --> 00:29:04,399
this line tool left click and drag if

726
00:29:02,240 --> 00:29:05,880
you want to create a straight line you

727
00:29:04,399 --> 00:29:08,200
can hold down the shift key on your

728
00:29:05,880 --> 00:29:11,039
keyboard if you don't you can freely

729
00:29:08,200 --> 00:29:13,360
create a line just like this and as you

730
00:29:11,039 --> 00:29:16,640
can see the rotation property will be

731
00:29:13,360 --> 00:29:18,720
changed if I set it to zero again it

732
00:29:16,640 --> 00:29:20,960
will be straight so a line is

733
00:29:18,720 --> 00:29:23,880
essentially a stroke by default there is

734
00:29:20,960 --> 00:29:25,519
no feel and here as you can see we have

735
00:29:23,880 --> 00:29:27,600
this stroke if you want to change the

736
00:29:25,519 --> 00:29:30,559
color of your line you can simply change

737
00:29:27,600 --> 00:29:32,919
it right here if you want to change the

738
00:29:30,559 --> 00:29:35,120
thickness just like what we've discussed

739
00:29:32,919 --> 00:29:37,840
you can change the thickness here but we

740
00:29:35,120 --> 00:29:40,200
also have access to these two additional

741
00:29:37,840 --> 00:29:41,960
options okay we can change the styling

742
00:29:40,200 --> 00:29:43,840
of our line for example if you want to

743
00:29:41,960 --> 00:29:47,640
create a line Arrow you can use this

744
00:29:43,840 --> 00:29:50,559
option a triangle Arrow reverse triangle

745
00:29:47,640 --> 00:29:52,240
Circle arrow diamond arrow round and

746
00:29:50,559 --> 00:29:54,840
square let's say you want to create a

747
00:29:52,240 --> 00:29:57,000
line Arrow you can use this option you

748
00:29:54,840 --> 00:29:59,640
can also set the end point to line Arrow

749
00:29:57,000 --> 00:30:02,519
as well and you will get such a line so

750
00:29:59,640 --> 00:30:04,480
that's basically how lines work quite

751
00:30:02,519 --> 00:30:07,320
simple isn't it what about the next

752
00:30:04,480 --> 00:30:09,519
shape the next shape is Arrow arrow is

753
00:30:07,320 --> 00:30:11,760
basically a stroke if I just create an

754
00:30:09,519 --> 00:30:14,559
arrow but by default the end point is

755
00:30:11,760 --> 00:30:16,880
set to line Arrow nothing different what

756
00:30:14,559 --> 00:30:18,279
about the next one which is ellipse if

757
00:30:16,880 --> 00:30:20,679
you hold down the shift key on your

758
00:30:18,279 --> 00:30:23,120
keyboard left click and drag you can

759
00:30:20,679 --> 00:30:25,679
create A Perfect Circle however this

760
00:30:23,120 --> 00:30:27,760
shape has its own unique properties as

761
00:30:25,679 --> 00:30:30,279
well if I hover over this node right

762
00:30:27,760 --> 00:30:33,240
here you'll see it says Arc if I left

763
00:30:30,279 --> 00:30:35,399
click and drag I'll get access to other

764
00:30:33,240 --> 00:30:37,200
properties here and I can specify

765
00:30:35,399 --> 00:30:40,240
different values for example I can

766
00:30:37,200 --> 00:30:43,760
change the start Point like this I can

767
00:30:40,240 --> 00:30:45,559
change these values sweep and ratio

768
00:30:43,760 --> 00:30:47,720
these properties are quite helpful when

769
00:30:45,559 --> 00:30:50,399
you want to create charts for example so

770
00:30:47,720 --> 00:30:53,519
if I just increase the ratio let's set

771
00:30:50,399 --> 00:30:56,519
it to 30 you can create such a shape I

772
00:30:53,519 --> 00:30:58,519
can easily adjust the ratio here as well

773
00:30:56,519 --> 00:31:01,039
I can change the sweep amount I can

774
00:30:58,519 --> 00:31:03,159
change the starting point just like that

775
00:31:01,039 --> 00:31:05,120
but we can also make it rounded we can

776
00:31:03,159 --> 00:31:07,960
increase the corner radius here let me

777
00:31:05,120 --> 00:31:10,200
set it to 30 and as you can see it will

778
00:31:07,960 --> 00:31:13,679
be rounded so that's how you can create

779
00:31:10,200 --> 00:31:15,399
an ellipse and the next shape is polygon

780
00:31:13,679 --> 00:31:17,960
let me just hold on the shift key on my

781
00:31:15,399 --> 00:31:20,600
keyboard and draw a perfect triangle and

782
00:31:17,960 --> 00:31:23,039
here we have this new property which is

783
00:31:20,600 --> 00:31:26,120
called count the minimum number you can

784
00:31:23,039 --> 00:31:28,440
set for this object is three but you can

785
00:31:26,120 --> 00:31:30,480
increase it as much as you want just

786
00:31:28,440 --> 00:31:33,080
like this you can also control this

787
00:31:30,480 --> 00:31:36,360
property right here you can increase it

788
00:31:33,080 --> 00:31:38,679
or decrease it and change the radius as

789
00:31:36,360 --> 00:31:40,000
well if you want to make it smoother now

790
00:31:38,679 --> 00:31:42,960
the next shape tool we are going to

791
00:31:40,000 --> 00:31:46,080
discuss is star so if you want to create

792
00:31:42,960 --> 00:31:47,760
a star we can use this shape tool and

793
00:31:46,080 --> 00:31:51,639
here we have different properties as

794
00:31:47,760 --> 00:31:54,159
well such as count and also ratio I can

795
00:31:51,639 --> 00:31:57,240
make it rounded I'm going to set it to

796
00:31:54,159 --> 00:31:59,000
24 and just change the ratio now the

797
00:31:57,240 --> 00:32:01,600
last thing we are going to discuss here

798
00:31:59,000 --> 00:32:03,960
is the image video option if you want to

799
00:32:01,600 --> 00:32:06,159
import an image or let's say images to

800
00:32:03,960 --> 00:32:08,120
your project you can simply use this

801
00:32:06,159 --> 00:32:10,840
option alternatively you can just drag

802
00:32:08,120 --> 00:32:12,760
and drop them into your figma file keep

803
00:32:10,840 --> 00:32:14,639
in mind that you should not drag and

804
00:32:12,760 --> 00:32:16,880
drop your images into your figma

805
00:32:14,639 --> 00:32:19,799
dashboard it won't work it should be

806
00:32:16,880 --> 00:32:22,519
imported to your figma file right here

807
00:32:19,799 --> 00:32:24,919
okay so using this option I can simply

808
00:32:22,519 --> 00:32:26,919
select one image and as soon as I do

809
00:32:24,919 --> 00:32:29,480
that I'll get the option to place the

810
00:32:26,919 --> 00:32:31,880
image wherever I want I can just left

811
00:32:29,480 --> 00:32:34,639
click somewhere and the image will be

812
00:32:31,880 --> 00:32:37,679
placed right here the other thing we can

813
00:32:34,639 --> 00:32:41,200
do is just select the image then left

814
00:32:37,679 --> 00:32:43,200
click and drag to specify its Dimension

815
00:32:41,200 --> 00:32:45,399
that's the other thing you can do or if

816
00:32:43,200 --> 00:32:48,320
you want to add this image to a shape

817
00:32:45,399 --> 00:32:50,760
you can just select it and then just

818
00:32:48,320 --> 00:32:52,919
hover over any shape it could be this

819
00:32:50,760 --> 00:32:54,760
one this one this one and just left

820
00:32:52,919 --> 00:32:56,960
click and that image will be placed

821
00:32:54,760 --> 00:32:59,480
inside your shape if you want to add

822
00:32:56,960 --> 00:33:02,279
multiple images simultaneously you can

823
00:32:59,480 --> 00:33:06,159
select them all just like that and then

824
00:33:02,279 --> 00:33:09,120
you can just left click one by one and

825
00:33:06,159 --> 00:33:11,600
they will be placed here or you could

826
00:33:09,120 --> 00:33:14,279
just select them let me show you you can

827
00:33:11,600 --> 00:33:17,399
left click and drag to Define their

828
00:33:14,279 --> 00:33:19,679
Dimensions one by one like that but as

829
00:33:17,399 --> 00:33:22,080
you may remember I also showed you

830
00:33:19,679 --> 00:33:24,480
another way of adding images to your

831
00:33:22,080 --> 00:33:27,320
shapes yes you're right you can use the

832
00:33:24,480 --> 00:33:29,279
Field property so let's say let me

833
00:33:27,320 --> 00:33:31,720
create another frame here let's say you

834
00:33:29,279 --> 00:33:34,399
have a rectangle okay I'm going to draw

835
00:33:31,720 --> 00:33:37,080
a rectangle here and you want to add an

836
00:33:34,399 --> 00:33:41,440
image to it what you can do is head over

837
00:33:37,080 --> 00:33:44,480
to F and from here choose image and

838
00:33:41,440 --> 00:33:47,639
upload from computer and let's just pick

839
00:33:44,480 --> 00:33:50,159
this image and this image is now placed

840
00:33:47,639 --> 00:33:52,480
inside your shape if you want to crop

841
00:33:50,159 --> 00:33:54,440
your image you can use this option by

842
00:33:52,480 --> 00:33:56,679
default it's set to feel which means

843
00:33:54,440 --> 00:33:58,960
that if I try to resize this shape the

844
00:33:56,679 --> 00:34:01,120
image will try to feel this shape

845
00:33:58,960 --> 00:34:03,960
however if I set it to fit now we'll be

846
00:34:01,120 --> 00:34:06,639
able to see the complete image inside

847
00:34:03,960 --> 00:34:09,399
and now if I try to resize it we still

848
00:34:06,639 --> 00:34:12,760
see the complete image if I set it to

849
00:34:09,399 --> 00:34:15,079
crop I can simply crop this image just

850
00:34:12,760 --> 00:34:17,359
like this and I can move the image

851
00:34:15,079 --> 00:34:19,879
around as well just keep that in mind

852
00:34:17,359 --> 00:34:22,480
and if I hit enter I can confirm that

853
00:34:19,879 --> 00:34:25,000
the crop looks good we also have tile

854
00:34:22,480 --> 00:34:26,760
which allows us to create a pattern but

855
00:34:25,000 --> 00:34:28,480
most of the time we don't use it so we

856
00:34:26,760 --> 00:34:30,960
are not going to discuss plus that and

857
00:34:28,480 --> 00:34:33,839
as you may remember you can modify these

858
00:34:30,960 --> 00:34:38,320
settings as well such as exposure

859
00:34:33,839 --> 00:34:41,079
contrast saturation temperature tint

860
00:34:38,320 --> 00:34:43,280
highlights and Shadow now I have a

861
00:34:41,079 --> 00:34:45,040
question we've discussed all these shape

862
00:34:43,280 --> 00:34:47,440
tools but what if you want to create

863
00:34:45,040 --> 00:34:49,839
something custom let's say you want to

864
00:34:47,440 --> 00:34:52,079
create something that's not included in

865
00:34:49,839 --> 00:34:55,320
these shape tools well I have good news

866
00:34:52,079 --> 00:34:57,119
for you these shapes are all vectors

867
00:34:55,320 --> 00:35:00,119
what does it mean it means that these

868
00:34:57,119 --> 00:35:03,320
shapes are constructed by nodes so you

869
00:35:00,119 --> 00:35:05,160
can easily customize them so here I'm

870
00:35:03,320 --> 00:35:07,480
going to create a

871
00:35:05,160 --> 00:35:09,400
rectangle let me just simply draw a

872
00:35:07,480 --> 00:35:11,560
rectangle and let's say you want to

873
00:35:09,400 --> 00:35:13,720
customize it while it's selected I'm

874
00:35:11,560 --> 00:35:16,200
going to hit enter on my keyboard and I

875
00:35:13,720 --> 00:35:18,480
soon as I do that we'll enter another

876
00:35:16,200 --> 00:35:20,599
environment okay here we'll see all the

877
00:35:18,480 --> 00:35:22,680
nodes that this shape is constructed

878
00:35:20,599 --> 00:35:25,280
with and we can simply left click on one

879
00:35:22,680 --> 00:35:27,960
of them and just drag it around to

880
00:35:25,280 --> 00:35:30,599
create something custom we can also make

881
00:35:27,960 --> 00:35:32,839
this corner rounded if you want to just

882
00:35:30,599 --> 00:35:35,160
like this but let's say four nodes are

883
00:35:32,839 --> 00:35:37,520
not enough for the shape we have in mind

884
00:35:35,160 --> 00:35:40,440
well don't worry we can simply hover

885
00:35:37,520 --> 00:35:42,960
over these lines and we can add more

886
00:35:40,440 --> 00:35:45,320
nodes to this shape to make it even more

887
00:35:42,960 --> 00:35:48,079
customized if I just add one more note

888
00:35:45,320 --> 00:35:51,280
here just left click and drag I can

889
00:35:48,079 --> 00:35:53,240
create something like this okay so I'm

890
00:35:51,280 --> 00:35:55,200
going to hit control Z or command Z and

891
00:35:53,240 --> 00:35:58,200
you know what let's create something fun

892
00:35:55,200 --> 00:36:00,920
let's create a bookmark icon here to do

893
00:35:58,200 --> 00:36:03,280
that we can simply add a node right at

894
00:36:00,920 --> 00:36:06,640
the bottom left click hold down the

895
00:36:03,280 --> 00:36:09,000
shift key and move it up just like this

896
00:36:06,640 --> 00:36:10,560
and now we have this bookmark icon but

897
00:36:09,000 --> 00:36:13,040
let's say you want to make it completely

898
00:36:10,560 --> 00:36:15,560
rounded what we can do is select all

899
00:36:13,040 --> 00:36:17,760
these nodes and just make it rounded and

900
00:36:15,560 --> 00:36:20,240
once you're done with the customization

901
00:36:17,760 --> 00:36:23,160
you can hit enter to confirm the other

902
00:36:20,240 --> 00:36:25,359
tool you can use to create custom shapes

903
00:36:23,160 --> 00:36:27,680
is the pen tool here as you can see we

904
00:36:25,359 --> 00:36:29,960
have the pen and pencil tool I'm going

905
00:36:27,680 --> 00:36:32,319
to select the pen tool let me get rid of

906
00:36:29,960 --> 00:36:34,680
this shape I'm going to remove it to use

907
00:36:32,319 --> 00:36:38,000
this pen tool you can simply left click

908
00:36:34,680 --> 00:36:40,680
to add a node just like that and then

909
00:36:38,000 --> 00:36:43,079
you can move around and left click once

910
00:36:40,680 --> 00:36:44,920
again and now you've just created a

911
00:36:43,079 --> 00:36:48,000
simple line if you want to have some

912
00:36:44,920 --> 00:36:50,680
curvature you can left click and drag

913
00:36:48,000 --> 00:36:54,640
simultaneously it's so important and you

914
00:36:50,680 --> 00:36:57,200
can create such a curve just like this

915
00:36:54,640 --> 00:37:01,000
and if I want to close this path I can

916
00:36:57,200 --> 00:37:04,440
just connect this node to our first node

917
00:37:01,000 --> 00:37:06,760
and this shape is now closed now what I

918
00:37:04,440 --> 00:37:10,000
can do is just click on this option

919
00:37:06,760 --> 00:37:12,280
close and I can add a field to it just

920
00:37:10,000 --> 00:37:15,040
like this and I can get rid of the

921
00:37:12,280 --> 00:37:17,880
stroke we don't need that and here is

922
00:37:15,040 --> 00:37:20,119
our custom shape the possibilities are

923
00:37:17,880 --> 00:37:22,079
endless you can just create any shape

924
00:37:20,119 --> 00:37:24,520
you want using these tools and the

925
00:37:22,079 --> 00:37:26,760
pencil tool Works similarly all right

926
00:37:24,520 --> 00:37:28,720
the next tool we are going to discuss is

927
00:37:26,760 --> 00:37:30,520
the text tool which is one of the most

928
00:37:28,720 --> 00:37:33,160
important Tools in figma because as

929
00:37:30,520 --> 00:37:36,000
designers we need to use text all the

930
00:37:33,160 --> 00:37:38,119
time the shortcut for the text tool is T

931
00:37:36,000 --> 00:37:41,280
and to create a text you can simply left

932
00:37:38,119 --> 00:37:45,079
click here and just start typing I'm

933
00:37:41,280 --> 00:37:47,000
going to type welcome back just like

934
00:37:45,079 --> 00:37:49,720
that I'm going to hit control a or

935
00:37:47,000 --> 00:37:52,440
command a to select the text and right

936
00:37:49,720 --> 00:37:54,880
here apart from all the properties we've

937
00:37:52,440 --> 00:37:57,520
discussed before we have access to a few

938
00:37:54,880 --> 00:37:59,760
additional properties for this text

939
00:37:57,520 --> 00:38:01,599
element here we have this typography

940
00:37:59,760 --> 00:38:04,160
section which allows us to modify the

941
00:38:01,599 --> 00:38:06,440
type face or font let's say here you

942
00:38:04,160 --> 00:38:08,800
have access to free Google fonts you can

943
00:38:06,440 --> 00:38:10,839
also use your own custom fonts but for

944
00:38:08,800 --> 00:38:13,240
now we are going to use these Google

945
00:38:10,839 --> 00:38:16,440
fonts and you can change it easily let

946
00:38:13,240 --> 00:38:19,440
me change that to plus J cart

947
00:38:16,440 --> 00:38:22,359
sense there it is then we can modify

948
00:38:19,440 --> 00:38:25,359
other properties like weight the font

949
00:38:22,359 --> 00:38:28,000
size Etc I'm going to make it semi bold

950
00:38:25,359 --> 00:38:30,119
change the font size to 4

951
00:38:28,000 --> 00:38:33,000
we can also change the line height the

952
00:38:30,119 --> 00:38:35,400
leather spacing the alignment but also

953
00:38:33,000 --> 00:38:38,240
we have access to these type settings

954
00:38:35,400 --> 00:38:41,720
these Advanced type settings such as

955
00:38:38,240 --> 00:38:44,680
decoration like this we can change the

956
00:38:41,720 --> 00:38:46,800
case property here like that we can use

957
00:38:44,680 --> 00:38:50,400
these advanced settings like vertical

958
00:38:46,800 --> 00:38:52,079
trim list style paragraph spacing Etc

959
00:38:50,400 --> 00:38:53,839
but we are not going to discuss them as

960
00:38:52,079 --> 00:38:55,720
they are more advanced and it's not

961
00:38:53,839 --> 00:38:57,319
needed at this stage now when it comes

962
00:38:55,720 --> 00:38:59,160
to text layers you need to keep in mind

963
00:38:57,319 --> 00:39:02,160
that that we have three types of text

964
00:38:59,160 --> 00:39:04,520
layers here under the layout section you

965
00:39:02,160 --> 00:39:06,000
see by default it's said to Auto width

966
00:39:04,520 --> 00:39:08,040
which means that if I keep typing

967
00:39:06,000 --> 00:39:10,960
something here the width of this text

968
00:39:08,040 --> 00:39:14,000
element will increase okay let me change

969
00:39:10,960 --> 00:39:16,880
the letter spacing here a bit and also

970
00:39:14,000 --> 00:39:19,319
I'm going to change it to none here but

971
00:39:16,880 --> 00:39:21,040
we also have this option Auto height if

972
00:39:19,319 --> 00:39:23,119
I set it to Auto height look what

973
00:39:21,040 --> 00:39:26,319
happens if I continue typing something

974
00:39:23,119 --> 00:39:28,720
here you see that now the width is fixed

975
00:39:26,319 --> 00:39:31,640
but the height grows the next option we

976
00:39:28,720 --> 00:39:34,240
have is this one fixed size if I set it

977
00:39:31,640 --> 00:39:36,760
to fixed size the boundary of this text

978
00:39:34,240 --> 00:39:39,280
layer will be fixed which means that if

979
00:39:36,760 --> 00:39:41,920
I just copy this text and paste it here

980
00:39:39,280 --> 00:39:44,800
look what happens the size is intact

981
00:39:41,920 --> 00:39:47,119
most of the time we use AO width or a

982
00:39:44,800 --> 00:39:48,839
the height so keep that in mind it's so

983
00:39:47,119 --> 00:39:51,560
important all right now that you're

984
00:39:48,839 --> 00:39:54,000
familiar with these tools let's talk

985
00:39:51,560 --> 00:39:55,960
about layers Basics but before we do

986
00:39:54,000 --> 00:39:57,520
that I'm going to quickly show you how

987
00:39:55,960 --> 00:40:00,000
you can learn more about these

988
00:39:57,520 --> 00:40:02,520
properties if you are completely new to

989
00:40:00,000 --> 00:40:05,079
figma let me create a shape here for

990
00:40:02,520 --> 00:40:07,880
example a rectangle and we already

991
00:40:05,079 --> 00:40:10,160
discuss these properties right but these

992
00:40:07,880 --> 00:40:12,440
properties don't have any labels for

993
00:40:10,160 --> 00:40:15,319
example here we have width here we have

994
00:40:12,440 --> 00:40:17,720
opacity but we cannot see any labels for

995
00:40:15,319 --> 00:40:20,119
these values well what you can do is

996
00:40:17,720 --> 00:40:22,520
head over to this percentage drop- down

997
00:40:20,119 --> 00:40:25,440
menu just click on it from here you can

998
00:40:22,520 --> 00:40:27,359
turn on property labels and as soon as

999
00:40:25,440 --> 00:40:30,920
you do that you will see that these

1000
00:40:27,359 --> 00:40:32,800
labels appear on top of these values and

1001
00:40:30,920 --> 00:40:35,359
this way you can Master how these

1002
00:40:32,800 --> 00:40:37,480
properties work and what they mean

1003
00:40:35,359 --> 00:40:39,599
essentially all right but for now I'm

1004
00:40:37,480 --> 00:40:41,480
just going to turn it off and let's get

1005
00:40:39,599 --> 00:40:44,800
rid of this shape and what I'm going to

1006
00:40:41,480 --> 00:40:46,319
do is head over to the dashboard and

1007
00:40:44,800 --> 00:40:49,119
from here I'm going to head over to the

1008
00:40:46,319 --> 00:40:51,800
community right here and I'm just going

1009
00:40:49,119 --> 00:40:54,359
to look for a landing page basically a

1010
00:40:51,800 --> 00:40:57,000
readymade project so we can discuss the

1011
00:40:54,359 --> 00:40:59,520
layers Basics so here I'm just going to

1012
00:40:57,000 --> 00:41:03,680
look for landing

1013
00:40:59,520 --> 00:41:06,160
page you can look for an app or a UI kit

1014
00:41:03,680 --> 00:41:09,079
whatever you like but I think a landing

1015
00:41:06,160 --> 00:41:11,560
page would work I'm going to go with

1016
00:41:09,079 --> 00:41:13,480
this one let's click on it and then to

1017
00:41:11,560 --> 00:41:15,440
use this landing page as our template

1018
00:41:13,480 --> 00:41:18,359
I'm going to click on opening figma and

1019
00:41:15,440 --> 00:41:20,520
I'll be taken to this project here as

1020
00:41:18,359 --> 00:41:23,040
you can see we have different pages we

1021
00:41:20,520 --> 00:41:24,680
have cover we have desktop phone style

1022
00:41:23,040 --> 00:41:26,960
components that's basically how the

1023
00:41:24,680 --> 00:41:28,960
designer structured this project we

1024
00:41:26,960 --> 00:41:31,640
don't need to see the cover we are going

1025
00:41:28,960 --> 00:41:33,359
to head over to desktop phone and style

1026
00:41:31,640 --> 00:41:35,440
and here we have different frames we

1027
00:41:33,359 --> 00:41:38,560
have the style frame where we see all

1028
00:41:35,440 --> 00:41:40,680
our text Styles and color styles we also

1029
00:41:38,560 --> 00:41:42,839
have the home landing page that's what

1030
00:41:40,680 --> 00:41:45,599
we need for this section of this video

1031
00:41:42,839 --> 00:41:48,359
so here if I select this home frame in

1032
00:41:45,599 --> 00:41:51,480
the layers list you see that we have

1033
00:41:48,359 --> 00:41:54,319
this Frame and we see this Frame icon

1034
00:41:51,480 --> 00:41:56,520
right next to it and inside you'll see

1035
00:41:54,319 --> 00:41:59,520
that we have many other elements we have

1036
00:41:56,520 --> 00:42:02,599
footer block contact block testimonials

1037
00:41:59,520 --> 00:42:05,520
we have this button group of cards CTA

1038
00:42:02,599 --> 00:42:08,359
block and each of these elements has its

1039
00:42:05,520 --> 00:42:11,119
own unique icon because in figma each

1040
00:42:08,359 --> 00:42:14,040
element is represented by a unique icon

1041
00:42:11,119 --> 00:42:16,599
for example here is the frame icon these

1042
00:42:14,040 --> 00:42:19,359
are the AO layout icons which we will

1043
00:42:16,599 --> 00:42:21,880
discuss in a few minutes and then again

1044
00:42:19,359 --> 00:42:23,680
we have a frame here we have an instance

1045
00:42:21,880 --> 00:42:26,480
of a component we'll talk about

1046
00:42:23,680 --> 00:42:28,480
components as well then here we have a

1047
00:42:26,480 --> 00:42:30,480
group so so we can quickly understand

1048
00:42:28,480 --> 00:42:32,040
that here we have a group of elements

1049
00:42:30,480 --> 00:42:34,480
and if I select any of these text

1050
00:42:32,040 --> 00:42:37,079
elements for example this one you will

1051
00:42:34,480 --> 00:42:39,040
see that the text element has its unique

1052
00:42:37,079 --> 00:42:41,160
icon as well all right now let's talk

1053
00:42:39,040 --> 00:42:43,280
about the order of layers well when it

1054
00:42:41,160 --> 00:42:46,119
comes to layers the order of your

1055
00:42:43,280 --> 00:42:48,599
elements matters why because depending

1056
00:42:46,119 --> 00:42:50,720
on how you organize your elements in the

1057
00:42:48,599 --> 00:42:53,240
layers list the visibility of your

1058
00:42:50,720 --> 00:42:55,319
elements changes what do I mean by that

1059
00:42:53,240 --> 00:42:58,119
well let's select this section for

1060
00:42:55,319 --> 00:43:01,440
example Services block okay okay if I

1061
00:42:58,119 --> 00:43:04,640
just try to move it up like that you'll

1062
00:43:01,440 --> 00:43:07,160
see that now it covers part of this

1063
00:43:04,640 --> 00:43:09,280
section we no longer see this button

1064
00:43:07,160 --> 00:43:11,599
book a consultation right and the reason

1065
00:43:09,280 --> 00:43:13,920
for that is that this particular element

1066
00:43:11,599 --> 00:43:16,040
Services block is placed on top of this

1067
00:43:13,920 --> 00:43:18,559
landing page frame you see we have this

1068
00:43:16,040 --> 00:43:20,760
Services frame then we have this landing

1069
00:43:18,559 --> 00:43:22,839
page frame and since it's placed on top

1070
00:43:20,760 --> 00:43:24,800
of that part of this Frame is not

1071
00:43:22,839 --> 00:43:27,160
visible now if I want to make sure that

1072
00:43:24,800 --> 00:43:29,359
this section this Services section is

1073
00:43:27,160 --> 00:43:31,400
placed behind this landing page what we

1074
00:43:29,359 --> 00:43:34,079
need to do is just select it in the

1075
00:43:31,400 --> 00:43:36,440
layers list or here on the canvas then

1076
00:43:34,079 --> 00:43:38,760
left click and drag it down like this

1077
00:43:36,440 --> 00:43:42,280
and place it right under the landing

1078
00:43:38,760 --> 00:43:45,720
page you see that now this particular

1079
00:43:42,280 --> 00:43:48,040
section is behind our hero section or

1080
00:43:45,720 --> 00:43:50,520
this landing page section so that's why

1081
00:43:48,040 --> 00:43:52,720
the order of elements matters in figma

1082
00:43:50,520 --> 00:43:55,240
or any other design tools now the other

1083
00:43:52,720 --> 00:43:57,119
important thing about the layers list is

1084
00:43:55,240 --> 00:43:58,800
that you can easily rename your layer

1085
00:43:57,119 --> 00:44:01,720
layers if you want to rename your layers

1086
00:43:58,800 --> 00:44:05,480
or frames what you can do is just double

1087
00:44:01,720 --> 00:44:07,400
click on its name and try to modify it

1088
00:44:05,480 --> 00:44:09,319
like that I'm going to rename it to Hero

1089
00:44:07,400 --> 00:44:11,440
section and hit enter now what if you

1090
00:44:09,319 --> 00:44:14,200
want to place an element inside another

1091
00:44:11,440 --> 00:44:16,880
element for example you may want to put

1092
00:44:14,200 --> 00:44:19,599
this Frame inside this frame in that

1093
00:44:16,880 --> 00:44:22,040
case you need to drag it and then hover

1094
00:44:19,599 --> 00:44:24,440
over this Frame and as you can see now

1095
00:44:22,040 --> 00:44:27,400
it's highlighted and then just drop it

1096
00:44:24,440 --> 00:44:29,720
and now this hero section is inside this

1097
00:44:27,400 --> 00:44:31,720
Services block section all right I'm

1098
00:44:29,720 --> 00:44:33,599
going to hit control Z or command Z to

1099
00:44:31,720 --> 00:44:35,920
undo the operation the other thing we

1100
00:44:33,599 --> 00:44:37,640
are going to discuss now is how you can

1101
00:44:35,920 --> 00:44:40,960
select a particular element on the

1102
00:44:37,640 --> 00:44:43,240
canvas well here if I select this Frame

1103
00:44:40,960 --> 00:44:45,200
you'll see that this main frame landing

1104
00:44:43,240 --> 00:44:47,319
page is selected right but what if you

1105
00:44:45,200 --> 00:44:49,839
want to select an element inside this

1106
00:44:47,319 --> 00:44:51,760
parent frame in that case you can either

1107
00:44:49,839 --> 00:44:54,040
head over to the layers list and just

1108
00:44:51,760 --> 00:44:56,400
look for your desired element and then

1109
00:44:54,040 --> 00:44:58,760
select it for example this text this

1110
00:44:56,400 --> 00:45:01,760
heading or or you can just double click

1111
00:44:58,760 --> 00:45:03,680
a few times until you reach your desired

1112
00:45:01,760 --> 00:45:05,800
element but a more efficient way for

1113
00:45:03,680 --> 00:45:08,359
selecting an element inside another

1114
00:45:05,800 --> 00:45:10,200
element is to just hold down the command

1115
00:45:08,359 --> 00:45:12,079
or control key on your keyboard hover

1116
00:45:10,200 --> 00:45:14,079
over the element you want to select and

1117
00:45:12,079 --> 00:45:16,760
as soon as it's highlighted you can just

1118
00:45:14,079 --> 00:45:18,640
left click and there it is now this

1119
00:45:16,760 --> 00:45:21,119
heading is selected let's say we want to

1120
00:45:18,640 --> 00:45:23,319
select this particular shape inside this

1121
00:45:21,119 --> 00:45:26,000
illustration what we can do is hold down

1122
00:45:23,319 --> 00:45:28,200
the control or command key and now since

1123
00:45:26,000 --> 00:45:29,800
I'm hovering over it it's highlighted

1124
00:45:28,200 --> 00:45:32,000
and if I just click on it it will be

1125
00:45:29,800 --> 00:45:34,599
selected all right now that you know how

1126
00:45:32,000 --> 00:45:36,880
layers work in figma let's start talking

1127
00:45:34,599 --> 00:45:39,079
about Boolean operations what are

1128
00:45:36,880 --> 00:45:41,319
Boolean operations well imagine you want

1129
00:45:39,079 --> 00:45:44,280
to create a custom icon I'm going to hit

1130
00:45:41,319 --> 00:45:48,280
a on my keyboard and just draw a simple

1131
00:45:44,280 --> 00:45:50,240
frame and here I'm going to create a few

1132
00:45:48,280 --> 00:45:53,040
circles hold down the shift key left

1133
00:45:50,240 --> 00:45:55,760
click and drag like that to create a

1134
00:45:53,040 --> 00:45:58,400
perfect circle and just change its color

1135
00:45:55,760 --> 00:46:00,599
to something else maybe blue then I'm

1136
00:45:58,400 --> 00:46:03,599
going to duplicate it hit controll D or

1137
00:46:00,599 --> 00:46:06,520
command D just like that and bring it

1138
00:46:03,599 --> 00:46:09,200
here now we have two circles overlapping

1139
00:46:06,520 --> 00:46:11,119
each other right if I select them both

1140
00:46:09,200 --> 00:46:14,200
and I head over to the design inspector

1141
00:46:11,119 --> 00:46:17,319
and I click on this icon I'll see these

1142
00:46:14,200 --> 00:46:19,720
four operations Union selection subtract

1143
00:46:17,319 --> 00:46:21,880
selection intersect selection and

1144
00:46:19,720 --> 00:46:24,400
exclude selection okay these are the

1145
00:46:21,880 --> 00:46:26,599
four formulas we can use to combine

1146
00:46:24,400 --> 00:46:28,599
different elements and create unified

1147
00:46:26,599 --> 00:46:30,839
shape shapes so let me show you how it

1148
00:46:28,599 --> 00:46:33,200
works before I use them I'm going to

1149
00:46:30,839 --> 00:46:35,400
select these two duplicate them move

1150
00:46:33,200 --> 00:46:38,920
them to the right duplicate them once

1151
00:46:35,400 --> 00:46:40,640
again and once again there it is now I'm

1152
00:46:38,920 --> 00:46:42,680
going to select them both remember to be

1153
00:46:40,640 --> 00:46:45,079
able to use the Boolean operations you

1154
00:46:42,680 --> 00:46:47,400
need to select at least two elements on

1155
00:46:45,079 --> 00:46:49,839
the canvas so here while these two

1156
00:46:47,400 --> 00:46:52,160
elements are selected I'm going to use

1157
00:46:49,839 --> 00:46:54,640
Union selection as soon as I do that you

1158
00:46:52,160 --> 00:46:56,960
may say well nothing happened well if

1159
00:46:54,640 --> 00:46:59,240
you take a look at the layers list now

1160
00:46:56,960 --> 00:47:02,720
you see that these two circles are

1161
00:46:59,240 --> 00:47:04,720
combined into one shape we have Union

1162
00:47:02,720 --> 00:47:06,880
and you can obviously rename it and if I

1163
00:47:04,720 --> 00:47:10,440
try to change its color look what

1164
00:47:06,880 --> 00:47:12,880
happens you see now the color of both

1165
00:47:10,440 --> 00:47:14,880
circles changes but what if you want to

1166
00:47:12,880 --> 00:47:17,359
modify this shape you can do that you

1167
00:47:14,880 --> 00:47:20,280
can just easily click on this Arrow icon

1168
00:47:17,359 --> 00:47:22,800
just like that to expand this Union

1169
00:47:20,280 --> 00:47:25,400
group and then just select any of these

1170
00:47:22,800 --> 00:47:27,839
layers any of these circles and just

1171
00:47:25,400 --> 00:47:30,319
modify that you can make it smaller like

1172
00:47:27,839 --> 00:47:33,280
this you can make it bigger you can just

1173
00:47:30,319 --> 00:47:35,480
move it around just like that however

1174
00:47:33,280 --> 00:47:37,760
you cannot change its color because when

1175
00:47:35,480 --> 00:47:40,119
you use this Union operation your

1176
00:47:37,760 --> 00:47:42,000
elements cannot have multiple colors

1177
00:47:40,119 --> 00:47:44,800
therefore if I just try to change the

1178
00:47:42,000 --> 00:47:47,200
color of this circle nothing happens you

1179
00:47:44,800 --> 00:47:49,240
see that's because their parent element

1180
00:47:47,200 --> 00:47:51,760
which is this Union group has a

1181
00:47:49,240 --> 00:47:54,079
different color so that's basically how

1182
00:47:51,760 --> 00:47:58,040
the union operation works the other

1183
00:47:54,079 --> 00:48:00,880
operation is subtract so so here if I

1184
00:47:58,040 --> 00:48:03,240
click on subtract selection you see one

1185
00:48:00,880 --> 00:48:05,480
element is subtracted from the other and

1186
00:48:03,240 --> 00:48:07,440
we can still customize it if you just

1187
00:48:05,480 --> 00:48:09,359
expand this group we can just select

1188
00:48:07,440 --> 00:48:11,559
this element and move it around what

1189
00:48:09,359 --> 00:48:14,079
about the next Formula I'm going to

1190
00:48:11,559 --> 00:48:16,800
select these two and from here I'm going

1191
00:48:14,079 --> 00:48:20,160
to choose intersect so as you can see

1192
00:48:16,800 --> 00:48:22,599
now the overlapping section of those two

1193
00:48:20,160 --> 00:48:24,720
circles is intact but the rest of the

1194
00:48:22,599 --> 00:48:27,520
shapes is gone and now I'm going to

1195
00:48:24,720 --> 00:48:29,800
select these two and I'm going to choose

1196
00:48:27,520 --> 00:48:32,720
exclude selection and here we have the

1197
00:48:29,800 --> 00:48:35,119
opposite of intersect so basically the

1198
00:48:32,720 --> 00:48:37,240
overlapping part has been removed from

1199
00:48:35,119 --> 00:48:39,319
these two circles and we have a hole

1200
00:48:37,240 --> 00:48:42,760
inside so let's say you want to create

1201
00:48:39,319 --> 00:48:45,400
an ie icon in that case here we can just

1202
00:48:42,760 --> 00:48:47,160
select this shape that we just created

1203
00:48:45,400 --> 00:48:49,240
rotate it I'm going to hold down the

1204
00:48:47,160 --> 00:48:52,040
shift key on my keyboard and rotate it

1205
00:48:49,240 --> 00:48:54,480
just like that let me zoom in then I'm

1206
00:48:52,040 --> 00:48:56,359
going to draw another Circle right here

1207
00:48:54,480 --> 00:48:58,480
in the center and you know what to do we

1208
00:48:56,359 --> 00:49:00,480
just need to select them both and from

1209
00:48:58,480 --> 00:49:02,359
here we just need to select subtract

1210
00:49:00,480 --> 00:49:04,240
selection so as you can see Boolean

1211
00:49:02,359 --> 00:49:07,200
operations allow you to combine

1212
00:49:04,240 --> 00:49:08,839
different shapes into a unified shape

1213
00:49:07,200 --> 00:49:11,200
and it's quite useful when you're trying

1214
00:49:08,839 --> 00:49:13,160
to create different icons for instance

1215
00:49:11,200 --> 00:49:15,559
now you might ask well how can we

1216
00:49:13,160 --> 00:49:17,839
ungroup these shapes in that case you

1217
00:49:15,559 --> 00:49:20,359
can just select your desired element

1218
00:49:17,839 --> 00:49:23,119
right click on it and click on ungroup

1219
00:49:20,359 --> 00:49:25,640
and there we go now we have two separate

1220
00:49:23,119 --> 00:49:28,000
shapes all right so far so good now that

1221
00:49:25,640 --> 00:49:29,920
you're familiar with Boolean operations

1222
00:49:28,000 --> 00:49:32,240
let's start discussing more advanced

1223
00:49:29,920 --> 00:49:34,119
features like Auto layout let's say you

1224
00:49:32,240 --> 00:49:36,640
want to design a simple button for

1225
00:49:34,119 --> 00:49:38,720
example a signning button how can you do

1226
00:49:36,640 --> 00:49:41,160
that all right so here I am inside the

1227
00:49:38,720 --> 00:49:42,799
file that we initially created our own

1228
00:49:41,160 --> 00:49:45,760
file and you might say to create a

1229
00:49:42,799 --> 00:49:47,720
button we can simply draw a rectangle

1230
00:49:45,760 --> 00:49:48,839
just like this then just add a text

1231
00:49:47,720 --> 00:49:52,720
element

1232
00:49:48,839 --> 00:49:56,920
inside like that we can make it a bit

1233
00:49:52,720 --> 00:49:59,319
larger maybe bold and we can place this

1234
00:49:56,920 --> 00:50:01,119
text right in the middle well we can do

1235
00:49:59,319 --> 00:50:03,359
that of course we can just select them

1236
00:50:01,119 --> 00:50:05,839
both and then group them as well to

1237
00:50:03,359 --> 00:50:08,400
group elements you can hit contrl G or

1238
00:50:05,839 --> 00:50:10,200
command G and now we have a group of

1239
00:50:08,400 --> 00:50:12,680
elements and we can move it around we

1240
00:50:10,200 --> 00:50:15,640
can resize it however this is not a good

1241
00:50:12,680 --> 00:50:18,119
method for creating a button why because

1242
00:50:15,640 --> 00:50:20,880
let's say you design this button let me

1243
00:50:18,119 --> 00:50:23,400
just select this rectangle make it a bit

1244
00:50:20,880 --> 00:50:26,200
smaller okay and then I'm going to

1245
00:50:23,400 --> 00:50:27,400
select this text align it to the center

1246
00:50:26,200 --> 00:50:30,680
all right

1247
00:50:27,400 --> 00:50:33,240
and I can even make it rounded and let's

1248
00:50:30,680 --> 00:50:37,680
change the color I'm going to change it

1249
00:50:33,240 --> 00:50:39,760
to let's say blue all right and I'm

1250
00:50:37,680 --> 00:50:42,839
going to select the text and it's going

1251
00:50:39,760 --> 00:50:45,520
to be dark blue I'm going to select this

1252
00:50:42,839 --> 00:50:48,040
blue and make it a bit darker okay so

1253
00:50:45,520 --> 00:50:50,680
here is our sign in button now let's say

1254
00:50:48,040 --> 00:50:53,000
we need another button maybe get a

1255
00:50:50,680 --> 00:50:54,640
started or sign up I'm going to rename

1256
00:50:53,000 --> 00:50:57,119
it to sign

1257
00:50:54,640 --> 00:50:59,200
in you might say all right right we can

1258
00:50:57,119 --> 00:51:02,040
just select it duplicate it hit control

1259
00:50:59,200 --> 00:51:04,200
D or command e bring it down and just

1260
00:51:02,040 --> 00:51:07,160
change the text well look what happens

1261
00:51:04,200 --> 00:51:10,319
when I do that I'm going to type get us

1262
00:51:07,160 --> 00:51:13,119
started you see that we have an issue

1263
00:51:10,319 --> 00:51:16,119
our button is not responsive so the

1264
00:51:13,119 --> 00:51:18,359
width is not determined by the text

1265
00:51:16,119 --> 00:51:20,359
inside by the content inside well how

1266
00:51:18,359 --> 00:51:22,400
can we resolve this issue that's where

1267
00:51:20,359 --> 00:51:24,240
other layout comes in Auto layout allows

1268
00:51:22,400 --> 00:51:26,880
you to turn your elements into

1269
00:51:24,240 --> 00:51:29,480
responsive frames let me show you it

1270
00:51:26,880 --> 00:51:32,280
works so instead of creating the button

1271
00:51:29,480 --> 00:51:35,079
this way we can just create a text and

1272
00:51:32,280 --> 00:51:37,720
just type sign in then while this text

1273
00:51:35,079 --> 00:51:40,160
is selected we can just add other layout

1274
00:51:37,720 --> 00:51:42,880
to it to do that we can just hit shift

1275
00:51:40,160 --> 00:51:45,720
and a like that and now as you can see

1276
00:51:42,880 --> 00:51:47,960
the icon has changed and it indicates

1277
00:51:45,720 --> 00:51:50,680
that now we have an other layout frame

1278
00:51:47,960 --> 00:51:52,599
and this text is inside this Frame let

1279
00:51:50,680 --> 00:51:56,040
me rename it to

1280
00:51:52,599 --> 00:51:58,160
button like that and now we can go ahead

1281
00:51:56,040 --> 00:52:00,599
and start less button so while this

1282
00:51:58,160 --> 00:52:02,880
button frame is selected we can just add

1283
00:52:00,599 --> 00:52:05,119
a field to it and change its color to

1284
00:52:02,880 --> 00:52:06,839
something else maybe this blue then I'm

1285
00:52:05,119 --> 00:52:09,480
going to select this text and just

1286
00:52:06,839 --> 00:52:13,040
change its color to this dark blue as

1287
00:52:09,480 --> 00:52:14,960
well like that and now if I select this

1288
00:52:13,040 --> 00:52:17,240
button you can see that now we have this

1289
00:52:14,960 --> 00:52:19,000
new section called a layout and we have

1290
00:52:17,240 --> 00:52:21,400
all these properties that we are going

1291
00:52:19,000 --> 00:52:24,280
to discuss so the first thing I'm going

1292
00:52:21,400 --> 00:52:26,799
to do is just make it rounded like this

1293
00:52:24,280 --> 00:52:30,079
button let me just increase the corner a

1294
00:52:26,799 --> 00:52:32,119
radius to 8 we can set it to four

1295
00:52:30,079 --> 00:52:34,520
something like that and now if I try to

1296
00:52:32,119 --> 00:52:36,319
change the text look what happens I'm

1297
00:52:34,520 --> 00:52:39,720
going to change it to get a

1298
00:52:36,319 --> 00:52:41,839
started you see that now our button is

1299
00:52:39,720 --> 00:52:43,960
responsive so basically since we have an

1300
00:52:41,839 --> 00:52:47,000
other layout frame the width of our

1301
00:52:43,960 --> 00:52:49,359
element is now determined by the content

1302
00:52:47,000 --> 00:52:51,480
inside that's so cool isn't it now let's

1303
00:52:49,359 --> 00:52:54,359
discuss all these properties here here

1304
00:52:51,480 --> 00:52:57,040
we have the resizing options we have hog

1305
00:52:54,359 --> 00:52:59,319
content fixed width we have have hog

1306
00:52:57,040 --> 00:53:01,680
content fixed height we have these AD

1307
00:52:59,319 --> 00:53:03,319
mean height add Max height all these

1308
00:53:01,680 --> 00:53:05,280
properties we're not going to discuss

1309
00:53:03,319 --> 00:53:07,359
all of them right now because I have

1310
00:53:05,280 --> 00:53:09,400
another comprehensive video about Auto

1311
00:53:07,359 --> 00:53:11,440
layout so if you want to Master Auto

1312
00:53:09,400 --> 00:53:13,680
layout and how it works make sure to

1313
00:53:11,440 --> 00:53:16,359
check out that video but for now let's

1314
00:53:13,680 --> 00:53:18,400
discuss these simple and basic

1315
00:53:16,359 --> 00:53:20,280
properties like the direction well when

1316
00:53:18,400 --> 00:53:22,640
it comes to the direction of Auto layout

1317
00:53:20,280 --> 00:53:25,599
we have three options we have vertical

1318
00:53:22,640 --> 00:53:28,160
we have horizontal and we have wrap okay

1319
00:53:25,599 --> 00:53:30,880
figma automatic determines which

1320
00:53:28,160 --> 00:53:33,040
direction works better for a particular

1321
00:53:30,880 --> 00:53:35,640
layout in this case it automatically set

1322
00:53:33,040 --> 00:53:38,559
it to horizontal but we can change it to

1323
00:53:35,640 --> 00:53:40,760
Vertical as well and nothing happens the

1324
00:53:38,559 --> 00:53:43,359
reason is here we have only one element

1325
00:53:40,760 --> 00:53:46,839
inside this Frame if I just select this

1326
00:53:43,359 --> 00:53:48,799
text and duplicate it and then I select

1327
00:53:46,839 --> 00:53:51,400
this button frame and just change the

1328
00:53:48,799 --> 00:53:53,839
Direction look what happens now we have

1329
00:53:51,400 --> 00:53:56,640
a vertical stack of elements so that's

1330
00:53:53,839 --> 00:53:59,079
basically how this direction works let

1331
00:53:56,640 --> 00:54:03,599
me show you another example quickly I'm

1332
00:53:59,079 --> 00:54:06,799
going to create a few shapes okay like

1333
00:54:03,599 --> 00:54:09,440
this maybe a square as

1334
00:54:06,799 --> 00:54:12,520
well and a

1335
00:54:09,440 --> 00:54:14,119
star like this okay now I'm going to

1336
00:54:12,520 --> 00:54:16,440
select them all and I'm going to place

1337
00:54:14,119 --> 00:54:18,480
them inside other layout frame to do

1338
00:54:16,440 --> 00:54:21,480
that you know what to do just hit shift

1339
00:54:18,480 --> 00:54:24,119
and a like that and now they are neatly

1340
00:54:21,480 --> 00:54:26,680
organized inside this Auto layout frame

1341
00:54:24,119 --> 00:54:28,880
we already discussed these two direction

1342
00:54:26,680 --> 00:54:31,119
we have vertical horizontal but what

1343
00:54:28,880 --> 00:54:34,799
about this one let me add a field to

1344
00:54:31,119 --> 00:54:37,440
this Frame and just change it to Black

1345
00:54:34,799 --> 00:54:40,040
like that and then let's see how this

1346
00:54:37,440 --> 00:54:42,640
option Works wrap if I try to resize

1347
00:54:40,040 --> 00:54:45,359
this frames width look what happens the

1348
00:54:42,640 --> 00:54:47,599
elements are intact they don't move but

1349
00:54:45,359 --> 00:54:50,559
look what happens when I set it to wrap

1350
00:54:47,599 --> 00:54:53,040
now I'm going to resize it you see that

1351
00:54:50,559 --> 00:54:55,760
so basically now the frame is wrapping

1352
00:54:53,040 --> 00:54:57,839
the content inside and it's quite

1353
00:54:55,760 --> 00:55:00,040
helpful when it comes to creating

1354
00:54:57,839 --> 00:55:01,839
responsive design obviously we are not

1355
00:55:00,040 --> 00:55:03,480
going to go through many examples in

1356
00:55:01,839 --> 00:55:05,760
this video but keep in mind that this

1357
00:55:03,480 --> 00:55:07,799
option exists and it's going to save you

1358
00:55:05,760 --> 00:55:10,240
so much time when it comes to making

1359
00:55:07,799 --> 00:55:12,480
your elements responsive all right good

1360
00:55:10,240 --> 00:55:14,400
now let's discuss the other properties

1361
00:55:12,480 --> 00:55:17,200
here we have the horizontal gap between

1362
00:55:14,400 --> 00:55:20,359
the elements inside basically using this

1363
00:55:17,200 --> 00:55:22,520
value you can Define the spacing between

1364
00:55:20,359 --> 00:55:24,720
the elements inside your othero layout

1365
00:55:22,520 --> 00:55:26,880
frame currently it's set to 10 you can

1366
00:55:24,720 --> 00:55:29,520
simply increase it like that however

1367
00:55:26,880 --> 00:55:31,599
since we resized our frame now we have a

1368
00:55:29,520 --> 00:55:34,440
fixed width here we are going to change

1369
00:55:31,599 --> 00:55:37,000
it back to hog content which means that

1370
00:55:34,440 --> 00:55:39,400
the main frame is hugging the content

1371
00:55:37,000 --> 00:55:42,200
inside and if you change the spacing

1372
00:55:39,400 --> 00:55:45,000
inside the frames width will change as

1373
00:55:42,200 --> 00:55:47,280
well like that so that's basically how

1374
00:55:45,000 --> 00:55:49,280
the hug option works instead of having a

1375
00:55:47,280 --> 00:55:51,520
fixed width we have a relative and

1376
00:55:49,280 --> 00:55:53,920
responsive width well these two

1377
00:55:51,520 --> 00:55:56,960
properties allow us to specify the

1378
00:55:53,920 --> 00:55:59,880
horizontal and vertical padding inside

1379
00:55:56,960 --> 00:56:02,039
our frame okay currently they are both

1380
00:55:59,880 --> 00:56:04,359
set to zero that's why we have no

1381
00:56:02,039 --> 00:56:06,400
padding around our elements if you want

1382
00:56:04,359 --> 00:56:08,960
to have some empty space around your

1383
00:56:06,400 --> 00:56:11,480
element you need to change these

1384
00:56:08,960 --> 00:56:15,039
properties like that I'm going to set it

1385
00:56:11,480 --> 00:56:18,760
to eight and eight you can also Define

1386
00:56:15,039 --> 00:56:20,599
an individual value for each side using

1387
00:56:18,760 --> 00:56:22,599
this option now let's get back to our

1388
00:56:20,599 --> 00:56:24,400
button here I'm going to select it and

1389
00:56:22,599 --> 00:56:27,440
I'm going to set the horizontal spacing

1390
00:56:24,400 --> 00:56:31,200
to 16 and the Very vertical spacing

1391
00:56:27,440 --> 00:56:33,520
could be eight now our button looks good

1392
00:56:31,200 --> 00:56:35,839
the width is set to hug the height is

1393
00:56:33,520 --> 00:56:39,039
set to hug as well that's why our button

1394
00:56:35,839 --> 00:56:41,480
is responsive if we set it to fixed

1395
00:56:39,039 --> 00:56:44,280
again it won't be responsive look what

1396
00:56:41,480 --> 00:56:46,839
happens you see that so keep that in

1397
00:56:44,280 --> 00:56:49,240
mind that in order for our button to be

1398
00:56:46,839 --> 00:56:51,799
responsive the resizing option should be

1399
00:56:49,240 --> 00:56:54,680
set to hog right next to these

1400
00:56:51,799 --> 00:56:56,520
properties we have this alignment option

1401
00:56:54,680 --> 00:56:59,640
as well which allows us to align the

1402
00:56:56,520 --> 00:57:01,920
elements inside our frame if I set it to

1403
00:56:59,640 --> 00:57:03,839
left nothing happens here you know why

1404
00:57:01,920 --> 00:57:06,000
because here the width is set to hot

1405
00:57:03,839 --> 00:57:08,440
contents and we also have only one

1406
00:57:06,000 --> 00:57:10,480
element inside if I change the resizing

1407
00:57:08,440 --> 00:57:13,240
option here for example I set it to

1408
00:57:10,480 --> 00:57:15,760
fixed width and I just make this bigger

1409
00:57:13,240 --> 00:57:17,520
currently the text is aligned right to

1410
00:57:15,760 --> 00:57:20,200
the center but if I want to align it to

1411
00:57:17,520 --> 00:57:22,400
the left I can easily change it so

1412
00:57:20,200 --> 00:57:24,400
that's how the alignment option works

1413
00:57:22,400 --> 00:57:26,160
now that you learned about other layout

1414
00:57:24,400 --> 00:57:28,280
let's start talking about compon

1415
00:57:26,160 --> 00:57:31,200
components what are components well in

1416
00:57:28,280 --> 00:57:33,240
simple words components are reusable

1417
00:57:31,200 --> 00:57:36,520
elements whenever you want to create an

1418
00:57:33,240 --> 00:57:39,039
element once and reuse it multiple times

1419
00:57:36,520 --> 00:57:41,280
across your project you can create a

1420
00:57:39,039 --> 00:57:43,720
component so let me show you how it

1421
00:57:41,280 --> 00:57:45,359
works imagine you've created this button

1422
00:57:43,720 --> 00:57:47,240
all right and you want to reuse it

1423
00:57:45,359 --> 00:57:50,160
across your project maybe on the

1424
00:57:47,240 --> 00:57:53,160
homepage on the contact us page on the

1425
00:57:50,160 --> 00:57:56,240
signup page Etc so what you can do is

1426
00:57:53,160 --> 00:57:58,319
this let's say we have another frame I'm

1427
00:57:56,240 --> 00:58:00,240
going to hit a on my keyboard to select

1428
00:57:58,319 --> 00:58:02,960
the frame tool and from here I'm just

1429
00:58:00,240 --> 00:58:04,839
going to choose iPhone 16 there it is

1430
00:58:02,960 --> 00:58:08,839
and I'm just going to duplicate it a few

1431
00:58:04,839 --> 00:58:10,799
times hit contrl D or command D okay now

1432
00:58:08,839 --> 00:58:13,200
I'm going to select this button and I'm

1433
00:58:10,799 --> 00:58:14,920
going to bring it down here all right

1434
00:58:13,200 --> 00:58:16,960
nice obviously we need to make it a bit

1435
00:58:14,920 --> 00:58:19,640
bigger because currently the height is

1436
00:58:16,960 --> 00:58:22,799
set to 35 it's not optimal so I'm just

1437
00:58:19,640 --> 00:58:25,720
going to set it to 44 and now let's say

1438
00:58:22,799 --> 00:58:28,400
you want to reuse this button on all

1439
00:58:25,720 --> 00:58:30,839
these other frames how can you do that

1440
00:58:28,400 --> 00:58:33,680
well you might say we can just select it

1441
00:58:30,839 --> 00:58:36,480
duplicate it and bring it right here

1442
00:58:33,680 --> 00:58:38,920
duplicate it once again just like that

1443
00:58:36,480 --> 00:58:40,680
and we can go ahead and change the text

1444
00:58:38,920 --> 00:58:42,880
well of course you can do that however

1445
00:58:40,680 --> 00:58:45,400
imagine you want to make a change to all

1446
00:58:42,880 --> 00:58:48,680
these buttons simultaneously how can you

1447
00:58:45,400 --> 00:58:51,599
do that well one way is to just select

1448
00:58:48,680 --> 00:58:53,240
them all like this and then make a

1449
00:58:51,599 --> 00:58:55,559
change for instance if you want to

1450
00:58:53,240 --> 00:58:57,920
change their color you can head over to

1451
00:58:55,559 --> 00:59:00,520
the field section and from here you can

1452
00:58:57,920 --> 00:59:02,640
just change it to whatever you want

1453
00:59:00,520 --> 00:59:04,440
however you need to select them all but

1454
00:59:02,640 --> 00:59:06,319
what if you have many different pages

1455
00:59:04,440 --> 00:59:08,319
like hundreds of different pages and

1456
00:59:06,319 --> 00:59:10,160
then each page you will have one or many

1457
00:59:08,319 --> 00:59:11,720
buttons like this and you want to change

1458
00:59:10,160 --> 00:59:14,359
them all whether you want to change

1459
00:59:11,720 --> 00:59:17,079
their color their size their Corner

1460
00:59:14,359 --> 00:59:18,920
radius Etc in that case it would be too

1461
00:59:17,079 --> 00:59:20,960
time consuming to just go ahead and

1462
00:59:18,920 --> 00:59:23,000
select them all and change all those

1463
00:59:20,960 --> 00:59:25,640
properties so essentially what we need

1464
00:59:23,000 --> 00:59:27,599
is a component and components allow us

1465
00:59:25,640 --> 00:59:30,240
to make a change once and the change

1466
00:59:27,599 --> 00:59:32,520
will be applied to all the instances of

1467
00:59:30,240 --> 00:59:34,920
that component let me show you how it

1468
00:59:32,520 --> 00:59:37,839
works I'm going to hit control Z command

1469
00:59:34,920 --> 00:59:39,520
Z like that and then I'm just going to

1470
00:59:37,839 --> 00:59:42,599
get rid of all these

1471
00:59:39,520 --> 00:59:45,480
buttons and right here we have this get

1472
00:59:42,599 --> 00:59:47,799
a started button and it's named button

1473
00:59:45,480 --> 00:59:49,359
right to turn it into a component while

1474
00:59:47,799 --> 00:59:52,079
it's selected we need to head over to

1475
00:59:49,359 --> 00:59:54,359
the design inspector right here and we

1476
00:59:52,079 --> 00:59:56,720
need to click on this button create

1477
00:59:54,359 --> 00:59:58,760
component as soon as I do that the

1478
00:59:56,720 --> 01:00:00,960
boundaries turn purple and it turns

1479
00:59:58,760 --> 01:00:03,359
purple right here in the layers list as

1480
01:00:00,960 --> 01:00:05,640
well the icons change too now we have

1481
01:00:03,359 --> 01:00:07,599
this unique icon which represents a

1482
01:00:05,640 --> 01:00:09,839
component before I show you how you can

1483
01:00:07,599 --> 01:00:12,079
create instances of your component let

1484
01:00:09,839 --> 01:00:15,160
me show you where this component is

1485
01:00:12,079 --> 01:00:17,760
saved if you head over to the assets tab

1486
01:00:15,160 --> 01:00:20,359
right here if I just click on it it says

1487
01:00:17,760 --> 01:00:23,240
we have this button component and to

1488
01:00:20,359 --> 01:00:25,440
create an incense of it essentially a

1489
01:00:23,240 --> 01:00:28,280
copy of it you can just simply drag and

1490
01:00:25,440 --> 01:00:30,720
drop it right here and if I head over to

1491
01:00:28,280 --> 01:00:34,720
the layers list now you see that this

1492
01:00:30,720 --> 01:00:36,760
one is an instance of our main component

1493
01:00:34,720 --> 01:00:39,160
and you can see that its icon is

1494
01:00:36,760 --> 01:00:41,680
different this icon represents an

1495
01:00:39,160 --> 01:00:44,400
instance of a component but this one

1496
01:00:41,680 --> 01:00:46,039
represents the main component so what's

1497
01:00:44,400 --> 01:00:48,520
the difference between the two well

1498
01:00:46,039 --> 01:00:51,000
essentially the main component or let's

1499
01:00:48,520 --> 01:00:52,960
say the master component is the parent

1500
01:00:51,000 --> 01:00:55,240
of the instances for instance this

1501
01:00:52,960 --> 01:00:57,319
parent can dictate to his children how

1502
01:00:55,240 --> 01:00:59,880
they should behave and look well let's

1503
01:00:57,319 --> 01:01:01,920
say we have many instances of this

1504
01:00:59,880 --> 01:01:04,799
button I'm going to bring this instance

1505
01:01:01,920 --> 01:01:06,559
right here I'm going to duplicate it and

1506
01:01:04,799 --> 01:01:09,480
let's duplicate it once again I'm going

1507
01:01:06,559 --> 01:01:12,359
to bring it down here okay let's say we

1508
01:01:09,480 --> 01:01:14,039
want to change their color all at once

1509
01:01:12,359 --> 01:01:16,599
well we don't need to select all these

1510
01:01:14,039 --> 01:01:19,400
instances instead we can just select the

1511
01:01:16,599 --> 01:01:21,520
parent or the master component and just

1512
01:01:19,400 --> 01:01:24,680
make the change here I'm going to change

1513
01:01:21,520 --> 01:01:27,880
it to let's say red and as you can see

1514
01:01:24,680 --> 01:01:30,000
now all the in instances of this

1515
01:01:27,880 --> 01:01:32,440
particular Master component have been

1516
01:01:30,000 --> 01:01:34,880
changed and that's how components work

1517
01:01:32,440 --> 01:01:37,280
so essentially all these instances are

1518
01:01:34,880 --> 01:01:39,280
linked to the master component but what

1519
01:01:37,280 --> 01:01:42,280
if for some reason you want to make a

1520
01:01:39,280 --> 01:01:44,760
change only to one instance of this

1521
01:01:42,280 --> 01:01:46,440
particular Master component well in that

1522
01:01:44,760 --> 01:01:49,520
case you can select that particular

1523
01:01:46,440 --> 01:01:51,760
instance and just change its color and

1524
01:01:49,520 --> 01:01:54,400
when we do that look what

1525
01:01:51,760 --> 01:01:56,440
happens now we made the change to this

1526
01:01:54,400 --> 01:01:59,279
particular instance and the other

1527
01:01:56,440 --> 01:02:01,440
instances are intact so if I just go

1528
01:01:59,279 --> 01:02:03,559
ahead and select the master component

1529
01:02:01,440 --> 01:02:05,760
and just change the color you see the

1530
01:02:03,559 --> 01:02:08,599
Field property or let's say the color

1531
01:02:05,760 --> 01:02:11,039
property of this instance is no longer

1532
01:02:08,599 --> 01:02:14,119
linked to our Master component because

1533
01:02:11,039 --> 01:02:16,640
we already changed it here however all

1534
01:02:14,119 --> 01:02:19,359
other properties are still linked for

1535
01:02:16,640 --> 01:02:20,960
instance let me just change the color

1536
01:02:19,359 --> 01:02:23,240
let's say we want to change the corner

1537
01:02:20,960 --> 01:02:25,920
radius if I just increase the corner

1538
01:02:23,240 --> 01:02:29,119
radius here this instance should be

1539
01:02:25,920 --> 01:02:30,960
changed as well look you see one thing

1540
01:02:29,119 --> 01:02:33,640
you need to keep in mind is that you

1541
01:02:30,960 --> 01:02:35,680
should never remove the master component

1542
01:02:33,640 --> 01:02:38,240
all right if I just select this master

1543
01:02:35,680 --> 01:02:40,839
component and I remove it it's gone

1544
01:02:38,240 --> 01:02:44,000
forever if you head over to the assets

1545
01:02:40,839 --> 01:02:46,440
it's no longer there okay so make sure

1546
01:02:44,000 --> 01:02:47,799
not to remove your master components now

1547
01:02:46,440 --> 01:02:50,680
the other thing I'm going to mention

1548
01:02:47,799 --> 01:02:52,680
here is how you can detach an instance

1549
01:02:50,680 --> 01:02:55,039
from the master component and it's so

1550
01:02:52,680 --> 01:02:56,319
simple you can just select this button

1551
01:02:55,039 --> 01:02:59,680
and head over to the the design

1552
01:02:56,319 --> 01:03:02,720
inspector and from here just click on

1553
01:02:59,680 --> 01:03:05,359
detach instance right here and as soon

1554
01:03:02,720 --> 01:03:08,599
as I do that you see that the icon has

1555
01:03:05,359 --> 01:03:10,880
changed and also it's no longer purple

1556
01:03:08,599 --> 01:03:13,000
which means that now we have a simple

1557
01:03:10,880 --> 01:03:16,079
Auto layout frame instead of an instance

1558
01:03:13,000 --> 01:03:18,880
of a component okay and this particular

1559
01:03:16,079 --> 01:03:21,240
button is no longer linked to this

1560
01:03:18,880 --> 01:03:24,279
master component so if I just go ahead

1561
01:03:21,240 --> 01:03:26,319
and change its Corner radius now you see

1562
01:03:24,279 --> 01:03:27,799
it's intact there are other things about

1563
01:03:26,319 --> 01:03:29,839
components that we are not going to

1564
01:03:27,799 --> 01:03:32,720
discuss in this video as they are more

1565
01:03:29,839 --> 01:03:35,119
advanced such as component properties as

1566
01:03:32,720 --> 01:03:37,440
you can see here we can add component

1567
01:03:35,119 --> 01:03:39,440
properties to this master component but

1568
01:03:37,440 --> 01:03:41,880
we'll cover this topic in a separate

1569
01:03:39,440 --> 01:03:43,799
dedicated video as it's more advanced

1570
01:03:41,880 --> 01:03:45,839
and we are not going to discuss all the

1571
01:03:43,799 --> 01:03:47,799
advanced features in this video while we

1572
01:03:45,839 --> 01:03:49,960
are talking about components I'm going

1573
01:03:47,799 --> 01:03:52,079
to mention another important feature

1574
01:03:49,960 --> 01:03:54,119
which is variance so here we have this

1575
01:03:52,079 --> 01:03:57,240
master component right I'm going to

1576
01:03:54,119 --> 01:03:59,599
bring it down let's say we want to have

1577
01:03:57,240 --> 01:04:01,839
different variants of this particular

1578
01:03:59,599 --> 01:04:04,520
component for example when it comes to

1579
01:04:01,839 --> 01:04:08,599
buttons we usually have different states

1580
01:04:04,520 --> 01:04:11,119
like default hover clicked Etc so how

1581
01:04:08,599 --> 01:04:13,880
can we create different variations of

1582
01:04:11,119 --> 01:04:15,760
this particular component it's so simple

1583
01:04:13,880 --> 01:04:18,119
first you need to select your master

1584
01:04:15,760 --> 01:04:21,559
component head over to the design panel

1585
01:04:18,119 --> 01:04:23,880
and from here just click on ADD variant

1586
01:04:21,559 --> 01:04:26,799
and as soon as I do that as you can see

1587
01:04:23,880 --> 01:04:30,440
this new frame is created a around these

1588
01:04:26,799 --> 01:04:33,680
two components and their icons changed

1589
01:04:30,440 --> 01:04:36,240
why because now these are variants here

1590
01:04:33,680 --> 01:04:39,039
we just created a component set and

1591
01:04:36,240 --> 01:04:41,920
inside this component set we have two

1592
01:04:39,039 --> 01:04:43,920
variants okay so here the first variant

1593
01:04:41,920 --> 01:04:45,760
is named default I'm going to select

1594
01:04:43,920 --> 01:04:48,359
this one and if I just double click on

1595
01:04:45,760 --> 01:04:51,079
it you'll see that it says property 1

1596
01:04:48,359 --> 01:04:53,279
equals variant 2 I'm just going to

1597
01:04:51,079 --> 01:04:56,599
change this part and I'm going to change

1598
01:04:53,279 --> 01:04:58,680
it to hover and while this hover variant

1599
01:04:56,599 --> 01:05:00,640
is selected I'm going to make a change

1600
01:04:58,680 --> 01:05:02,960
for instance I'm going to change its

1601
01:05:00,640 --> 01:05:05,079
color a bit now I'm going to select this

1602
01:05:02,960 --> 01:05:07,960
and I'm going to duplicate I can either

1603
01:05:05,079 --> 01:05:10,680
hit control D or command D or I can

1604
01:05:07,960 --> 01:05:13,119
click on this plus icon to add a variant

1605
01:05:10,680 --> 01:05:15,640
just like that and we have the third

1606
01:05:13,119 --> 01:05:20,359
variant and I'm going to change this

1607
01:05:15,640 --> 01:05:22,760
part to press like that and now we have

1608
01:05:20,359 --> 01:05:25,160
three different variants so while this

1609
01:05:22,760 --> 01:05:27,359
pressed variant is selected I'm going to

1610
01:05:25,160 --> 01:05:29,520
make it a bit darker of course we can

1611
01:05:27,359 --> 01:05:32,160
change the text color as well but for

1612
01:05:29,520 --> 01:05:35,400
now I'm going to leave it as is okay so

1613
01:05:32,160 --> 01:05:38,160
how can we use this component set well

1614
01:05:35,400 --> 01:05:41,160
now if you select this button which is

1615
01:05:38,160 --> 01:05:44,039
an instense of our Master component

1616
01:05:41,160 --> 01:05:46,880
you'll see right here that we have this

1617
01:05:44,039 --> 01:05:49,160
property it's called property one and we

1618
01:05:46,880 --> 01:05:52,079
have this drop- down menu and inside we

1619
01:05:49,160 --> 01:05:55,319
have three different variants default

1620
01:05:52,079 --> 01:05:57,359
hover and press so we can basically

1621
01:05:55,319 --> 01:06:00,039
switch switch between different variants

1622
01:05:57,359 --> 01:06:02,480
of this particular component that's so

1623
01:06:00,039 --> 01:06:04,880
cool isn't it but how can we change this

1624
01:06:02,480 --> 01:06:07,559
property name it's so simple we just

1625
01:06:04,880 --> 01:06:10,520
need to select our component set and

1626
01:06:07,559 --> 01:06:14,599
here we can just click property one and

1627
01:06:10,520 --> 01:06:17,760
just change it to State like that and

1628
01:06:14,599 --> 01:06:20,359
now instead of property one we have this

1629
01:06:17,760 --> 01:06:21,520
state property just like that all right

1630
01:06:20,359 --> 01:06:24,920
the next thing we are going to talk

1631
01:06:21,520 --> 01:06:27,119
about is figma plugins what are plugins

1632
01:06:24,920 --> 01:06:29,599
well essentially plugins are thirdparty

1633
01:06:27,119 --> 01:06:32,039
applications created by the community

1634
01:06:29,599 --> 01:06:33,839
that extend the editor functionality so

1635
01:06:32,039 --> 01:06:35,760
let me show you how it works imagine

1636
01:06:33,839 --> 01:06:37,640
you're looking for a few images for your

1637
01:06:35,760 --> 01:06:40,119
project what you can do is just go ahead

1638
01:06:37,640 --> 01:06:43,079
and Google it find some websites with

1639
01:06:40,119 --> 01:06:45,680
royaltyfree images download the images

1640
01:06:43,079 --> 01:06:48,079
and import them to your Figo project

1641
01:06:45,680 --> 01:06:50,520
that's one way but the other way and the

1642
01:06:48,079 --> 01:06:53,359
most efficient way is to just head over

1643
01:06:50,520 --> 01:06:55,839
to this option actions and from here

1644
01:06:53,359 --> 01:06:58,400
head over to the plugins and widgets tab

1645
01:06:55,839 --> 01:07:00,319
and just look for the unsplash plug-in

1646
01:06:58,400 --> 01:07:03,079
you can find thousands of different

1647
01:07:00,319 --> 01:07:05,319
useful plugins in the community but here

1648
01:07:03,079 --> 01:07:07,119
I'm just going to show you how plugins

1649
01:07:05,319 --> 01:07:09,400
work but we are not going to check out

1650
01:07:07,119 --> 01:07:11,359
every single plug-in that exists all

1651
01:07:09,400 --> 01:07:13,359
right so here I'm just going to look for

1652
01:07:11,359 --> 01:07:16,440
unsplash for those of you who are not

1653
01:07:13,359 --> 01:07:18,200
familiar with the unsplash website it's

1654
01:07:16,440 --> 01:07:20,160
basically a website that provides you

1655
01:07:18,200 --> 01:07:23,000
with royalty-free images that you can

1656
01:07:20,160 --> 01:07:25,520
use in your projects for free and here

1657
01:07:23,000 --> 01:07:27,000
is its plug-in its official plugin I'm

1658
01:07:25,520 --> 01:07:29,400
I'm going to run it all right this

1659
01:07:27,000 --> 01:07:31,839
window pops up and here is where you can

1660
01:07:29,400 --> 01:07:33,680
just go ahead and look for your desired

1661
01:07:31,839 --> 01:07:35,359
image you can head over to the preset

1662
01:07:33,680 --> 01:07:37,799
stab and you can choose from one of

1663
01:07:35,359 --> 01:07:39,680
these categories for example portrait or

1664
01:07:37,799 --> 01:07:41,400
you can just head over to the search and

1665
01:07:39,680 --> 01:07:44,880
just type in what you're looking for for

1666
01:07:41,400 --> 01:07:47,400
example let's say 3D

1667
01:07:44,880 --> 01:07:50,000
product I'm going to hit search and

1668
01:07:47,400 --> 01:07:52,400
there it is we have many 3D products

1669
01:07:50,000 --> 01:07:54,960
that we can use for example this one

1670
01:07:52,400 --> 01:07:56,799
this one some of them are paid but most

1671
01:07:54,960 --> 01:08:00,160
of them are are free let's see what we

1672
01:07:56,799 --> 01:08:01,599
can use maybe this one it looks good I'm

1673
01:08:00,160 --> 01:08:05,160
going to click on it and it will be

1674
01:08:01,599 --> 01:08:07,079
placed inside our canvas and now we can

1675
01:08:05,160 --> 01:08:08,920
easily move it around edit it and do

1676
01:08:07,079 --> 01:08:11,119
whatever we want and remember you can

1677
01:08:08,920 --> 01:08:13,920
use this photo for free because these

1678
01:08:11,119 --> 01:08:16,159
are royalty-free images what about other

1679
01:08:13,920 --> 01:08:18,799
plugins as I mentioned you can find many

1680
01:08:16,159 --> 01:08:21,440
useful plugins in the community but for

1681
01:08:18,799 --> 01:08:24,199
now let's check out a few other plugins

1682
01:08:21,440 --> 01:08:27,159
here we have HTML to design this plugin

1683
01:08:24,199 --> 01:08:29,440
allows you to turn any website to a

1684
01:08:27,159 --> 01:08:32,080
figma design file so here if you just

1685
01:08:29,440 --> 01:08:34,159
run this plugin and just type apple.com

1686
01:08:32,080 --> 01:08:36,640
and hit import it will import the

1687
01:08:34,159 --> 01:08:38,440
Apple's website right here let me show

1688
01:08:36,640 --> 01:08:41,279
you how it works and it's not going to

1689
01:08:38,440 --> 01:08:44,080
be just a static image it will add every

1690
01:08:41,279 --> 01:08:47,000
single layer that's been used for this

1691
01:08:44,080 --> 01:08:49,560
particular project here inside this

1692
01:08:47,000 --> 01:08:51,719
Frame you see we have section and inside

1693
01:08:49,560 --> 01:08:54,199
this section we have background we have

1694
01:08:51,719 --> 01:08:56,159
all the layers and we can just select

1695
01:08:54,199 --> 01:08:59,239
them move them around

1696
01:08:56,159 --> 01:09:01,400
we can change their properties Etc and

1697
01:08:59,239 --> 01:09:04,279
this plugin is quite helpful if you're

1698
01:09:01,400 --> 01:09:07,279
trying to get into UI design and you

1699
01:09:04,279 --> 01:09:09,239
just want to learn how other designers

1700
01:09:07,279 --> 01:09:11,440
structure their website if you want to

1701
01:09:09,239 --> 01:09:14,080
learn from big companies like apple

1702
01:09:11,440 --> 01:09:16,560
Google meta Etc you can use this plugin

1703
01:09:14,080 --> 01:09:19,400
to learn how to structure your design

1704
01:09:16,560 --> 01:09:22,000
how to use colors typography Etc all

1705
01:09:19,400 --> 01:09:24,000
right now let me get rid of this section

1706
01:09:22,000 --> 01:09:26,679
that he just created what about other

1707
01:09:24,000 --> 01:09:29,400
plugins well here we have this Arc

1708
01:09:26,679 --> 01:09:31,600
plugin which allows you to bend your

1709
01:09:29,400 --> 01:09:33,920
text layers it's quite fun to check out

1710
01:09:31,600 --> 01:09:36,679
different plugins however first we need

1711
01:09:33,920 --> 01:09:41,199
to add a text layer I'm just going to

1712
01:09:36,679 --> 01:09:43,719
type welcome I'm just going to copy it

1713
01:09:41,199 --> 01:09:46,560
and just paste it a few

1714
01:09:43,719 --> 01:09:48,960
times like this now while this text

1715
01:09:46,560 --> 01:09:51,679
layer is selected I'm going to run this

1716
01:09:48,960 --> 01:09:55,080
Mark bend your type plugin and there it

1717
01:09:51,679 --> 01:09:57,040
is we can basically change these values

1718
01:09:55,080 --> 01:10:00,080
until until we are satisfied with the

1719
01:09:57,040 --> 01:10:01,760
result so here I'm going to hit apply

1720
01:10:00,080 --> 01:10:04,400
and there it is now the next thing we

1721
01:10:01,760 --> 01:10:07,239
are going to discuss is layout GDs what

1722
01:10:04,400 --> 01:10:09,840
are layout GDs well layout GDs help us

1723
01:10:07,239 --> 01:10:11,520
align different objects within a frame

1724
01:10:09,840 --> 01:10:13,760
let me show you what I mean by that I'm

1725
01:10:11,520 --> 01:10:16,159
going to head over to this project and

1726
01:10:13,760 --> 01:10:18,120
here if I select this homepage you will

1727
01:10:16,159 --> 01:10:20,440
see that we have this layout grid

1728
01:10:18,120 --> 01:10:22,880
section the designer use the grid here

1729
01:10:20,440 --> 01:10:25,880
which is hidden but if I click on this I

1730
01:10:22,880 --> 01:10:28,840
icon I can just unhide it and you will

1731
01:10:25,880 --> 01:10:31,719
see these vertical lines basically now

1732
01:10:28,840 --> 01:10:34,440
we have 12 columns here as you can see

1733
01:10:31,719 --> 01:10:36,800
we have a column GD we have three

1734
01:10:34,440 --> 01:10:40,440
different types of geds in figma we have

1735
01:10:36,800 --> 01:10:44,600
greed like that we have columns greed

1736
01:10:40,440 --> 01:10:47,159
like that and we have rows like this

1737
01:10:44,600 --> 01:10:49,040
okay usually we use column greets and if

1738
01:10:47,159 --> 01:10:51,040
you want to adjust the preferences of

1739
01:10:49,040 --> 01:10:53,480
this greed you can just click on this

1740
01:10:51,040 --> 01:10:55,960
icon but for now let me show you how you

1741
01:10:53,480 --> 01:10:57,880
can add a greed to your frame

1742
01:10:55,960 --> 01:10:59,960
well let's say we have a frame I'm just

1743
01:10:57,880 --> 01:11:03,000
going to draw a frame here and we want

1744
01:10:59,960 --> 01:11:05,120
to add a layout grid to it to do that

1745
01:11:03,000 --> 01:11:06,719
while this Frame is selected you can

1746
01:11:05,120 --> 01:11:09,800
just head over to the layout grid

1747
01:11:06,719 --> 01:11:12,199
section and just hit this plus icon and

1748
01:11:09,800 --> 01:11:14,400
just like that you can add a layout grid

1749
01:11:12,199 --> 01:11:17,400
to your frame you can change the type of

1750
01:11:14,400 --> 01:11:19,320
grid and then you can just modify the

1751
01:11:17,400 --> 01:11:22,040
preferences here so now let me just

1752
01:11:19,320 --> 01:11:24,760
select this homepage again and just

1753
01:11:22,040 --> 01:11:26,760
click on this icon layout grid settings

1754
01:11:24,760 --> 01:11:29,400
again here you can change the type of

1755
01:11:26,760 --> 01:11:31,719
greed then here we have this property

1756
01:11:29,400 --> 01:11:33,520
called count which allows you to define

1757
01:11:31,719 --> 01:11:35,280
the number of columns you want to get

1758
01:11:33,520 --> 01:11:37,719
here usually for the desktop version of

1759
01:11:35,280 --> 01:11:39,440
a website we use a 12 column grid but

1760
01:11:37,719 --> 01:11:41,840
you can change it to whatever you want

1761
01:11:39,440 --> 01:11:44,239
you can change it to 16 you can change

1762
01:11:41,840 --> 01:11:46,560
it to eight whatever you like you can

1763
01:11:44,239 --> 01:11:49,120
also change the color you can change the

1764
01:11:46,560 --> 01:11:52,199
type currently we have this stretch type

1765
01:11:49,120 --> 01:11:54,719
we have left basically using this option

1766
01:11:52,199 --> 01:11:55,840
you can align your layout grid to the

1767
01:11:54,719 --> 01:11:58,239
left side

1768
01:11:55,840 --> 01:12:01,719
you can align it to the right align it

1769
01:11:58,239 --> 01:12:04,239
to the center or set it to stretch when

1770
01:12:01,719 --> 01:12:06,639
you set the type to stretch the width

1771
01:12:04,239 --> 01:12:09,600
will be disabled because the width is

1772
01:12:06,639 --> 01:12:12,639
determined automatically based on these

1773
01:12:09,600 --> 01:12:15,080
two values margin and gutter so here if

1774
01:12:12,639 --> 01:12:17,360
I select this home frame and I try to

1775
01:12:15,080 --> 01:12:20,400
resize it like this you see that the

1776
01:12:17,360 --> 01:12:22,719
width of our layout grid changes that's

1777
01:12:20,400 --> 01:12:24,600
because the type is set to stretch and

1778
01:12:22,719 --> 01:12:27,440
now let me show you what these two

1779
01:12:24,600 --> 01:12:30,080
properties are margin and gutter what do

1780
01:12:27,440 --> 01:12:32,920
they do well here the margin property

1781
01:12:30,080 --> 01:12:35,560
defines the margin on the sides of this

1782
01:12:32,920 --> 01:12:37,560
layout GD currently it's set to 100

1783
01:12:35,560 --> 01:12:40,440
which means that on the left side and on

1784
01:12:37,560 --> 01:12:43,360
the right side we have a 100 pixel

1785
01:12:40,440 --> 01:12:46,520
margin if I just increase that to let's

1786
01:12:43,360 --> 01:12:49,520
say 150 look what happens now we have

1787
01:12:46,520 --> 01:12:51,719
more empty space on the sides but what

1788
01:12:49,520 --> 01:12:54,800
about the Gutter The Gutter defines the

1789
01:12:51,719 --> 01:12:57,639
spacing between these columns so if I

1790
01:12:54,800 --> 01:13:01,440
set it to 32 you see now we have a

1791
01:12:57,639 --> 01:13:04,239
narrower Gap if I set it to 60 now we

1792
01:13:01,440 --> 01:13:06,920
have a wider gap between these columns

1793
01:13:04,239 --> 01:13:08,800
so that's basically how the layout grid

1794
01:13:06,920 --> 01:13:11,000
works again if you want to master how

1795
01:13:08,800 --> 01:13:13,040
the grid works I have a dedicated video

1796
01:13:11,000 --> 01:13:15,040
about that on my channel make sure to go

1797
01:13:13,040 --> 01:13:17,600
ahead and check that out the next thing

1798
01:13:15,040 --> 01:13:20,159
we are going to discuss is prototyping

1799
01:13:17,600 --> 01:13:21,920
how you can make your design interactive

1800
01:13:20,159 --> 01:13:23,880
to do that I'm just going to head over

1801
01:13:21,920 --> 01:13:25,960
to the community and just look for a

1802
01:13:23,880 --> 01:13:28,000
mobile application project project okay

1803
01:13:25,960 --> 01:13:30,360
so from here I'm just going to look for

1804
01:13:28,000 --> 01:13:32,760
mobile apps all right we have many

1805
01:13:30,360 --> 01:13:35,400
different options to choose from let's

1806
01:13:32,760 --> 01:13:38,320
see what we can find I like this one I'm

1807
01:13:35,400 --> 01:13:41,280
just going to open it up hit open inigma

1808
01:13:38,320 --> 01:13:43,440
cool let's head over to design and here

1809
01:13:41,280 --> 01:13:45,480
as you can see we have different pages

1810
01:13:43,440 --> 01:13:48,120
right we have the splash screen we have

1811
01:13:45,480 --> 01:13:50,080
onboarding we have signing and here we

1812
01:13:48,120 --> 01:13:52,600
have the homepage we have the product

1813
01:13:50,080 --> 01:13:54,480
detail Etc so let's make these Pages

1814
01:13:52,600 --> 01:13:56,560
interactive let's say we want to make

1815
01:13:54,480 --> 01:13:59,120
this card clickable so when the user

1816
01:13:56,560 --> 01:14:01,880
clicks on this apple card he or she will

1817
01:13:59,120 --> 01:14:03,840
be taken to this page how can we do that

1818
01:14:01,880 --> 01:14:05,440
it's so simple first we need to select

1819
01:14:03,840 --> 01:14:07,880
the element we want to use as our

1820
01:14:05,440 --> 01:14:10,159
trigger which is going to be this card

1821
01:14:07,880 --> 01:14:12,440
okay so I'm going to select it then I'm

1822
01:14:10,159 --> 01:14:14,719
going to head over to the Prototype tab

1823
01:14:12,440 --> 01:14:16,560
right here and as soon as I select this

1824
01:14:14,719 --> 01:14:19,239
tab I can just create a connection

1825
01:14:16,560 --> 01:14:22,560
between these two pages here if I hover

1826
01:14:19,239 --> 01:14:24,679
over this blue boundary you'll see this

1827
01:14:22,560 --> 01:14:26,840
plus icon appears I'm going to left

1828
01:14:24,679 --> 01:14:29,159
click and drag and just connect it to

1829
01:14:26,840 --> 01:14:31,280
our next page and as soon as I do that

1830
01:14:29,159 --> 01:14:33,440
this window pops up here as you can see

1831
01:14:31,280 --> 01:14:36,800
we need to specify the trigger the

1832
01:14:33,440 --> 01:14:39,280
action destination and the animation so

1833
01:14:36,800 --> 01:14:41,040
the trigger by default is set to unclick

1834
01:14:39,280 --> 01:14:42,920
which means that this card will be

1835
01:14:41,040 --> 01:14:45,560
clickable that's good we have other

1836
01:14:42,920 --> 01:14:48,080
triggers like UND drag while hovering

1837
01:14:45,560 --> 01:14:49,960
while pressing Mouse enter Etc we are

1838
01:14:48,080 --> 01:14:52,320
not going to discuss this because I have

1839
01:14:49,960 --> 01:14:54,080
many different videos about prototyping

1840
01:14:52,320 --> 01:14:56,320
on my channel so if you want to master

1841
01:14:54,080 --> 01:14:58,400
prototyping in MMA make sure to check

1842
01:14:56,320 --> 01:15:00,719
out my other videos for now I'm going to

1843
01:14:58,400 --> 01:15:02,760
leave it as is and the action is going

1844
01:15:00,719 --> 01:15:05,280
to be navigate 2 because we want to

1845
01:15:02,760 --> 01:15:08,600
transition from one page to another but

1846
01:15:05,280 --> 01:15:11,920
we have other types of actions like back

1847
01:15:08,600 --> 01:15:14,840
scroll to open link Etc let's leave it

1848
01:15:11,920 --> 01:15:17,440
as is and the destination is going to be

1849
01:15:14,840 --> 01:15:20,159
our product detail page okay so this

1850
01:15:17,440 --> 01:15:22,239
page home screen is our starting point

1851
01:15:20,159 --> 01:15:25,400
and this product detail page is going to

1852
01:15:22,239 --> 01:15:27,480
be our destination nice now as you can

1853
01:15:25,400 --> 01:15:29,960
see here we have this flow if I just

1854
01:15:27,480 --> 01:15:32,400
click on this icon this window pops up

1855
01:15:29,960 --> 01:15:35,440
and now if I hover over this you see

1856
01:15:32,400 --> 01:15:37,679
that my cursor changes to this hand icon

1857
01:15:35,440 --> 01:15:39,560
indicating that this is clickable now so

1858
01:15:37,679 --> 01:15:41,400
if I click on it I'll be taken to the

1859
01:15:39,560 --> 01:15:43,719
destination page which is this product

1860
01:15:41,400 --> 01:15:46,560
detail page however here the transition

1861
01:15:43,719 --> 01:15:48,600
was instant because we didn't set an

1862
01:15:46,560 --> 01:15:50,880
animation for it but now if I just click

1863
01:15:48,600 --> 01:15:54,040
on this Arrow line I can change the

1864
01:15:50,880 --> 01:15:56,960
animation from instant to Smart animate

1865
01:15:54,040 --> 01:15:59,880
or move in move out Etc I'm going to set

1866
01:15:56,960 --> 01:16:02,639
it to Smart animate like that and I'm

1867
01:15:59,880 --> 01:16:04,960
going to play it once again click here

1868
01:16:02,639 --> 01:16:06,880
and now we have this fading animation of

1869
01:16:04,960 --> 01:16:08,600
course we can make it much better than

1870
01:16:06,880 --> 01:16:11,000
this but I just wanted to show you how

1871
01:16:08,600 --> 01:16:13,199
simple it is to create a prototype in

1872
01:16:11,000 --> 01:16:15,320
figma super fast all right now that

1873
01:16:13,199 --> 01:16:17,120
you're familiar with prototyping in

1874
01:16:15,320 --> 01:16:19,280
figma let me show you how you can make

1875
01:16:17,120 --> 01:16:21,880
your components interactive and as you

1876
01:16:19,280 --> 01:16:23,880
remember we created this component set

1877
01:16:21,880 --> 01:16:26,639
this button component set but our button

1878
01:16:23,880 --> 01:16:29,800
is not Interactive right so here if I

1879
01:16:26,639 --> 01:16:32,520
just draw a simple frame and I just drag

1880
01:16:29,800 --> 01:16:35,760
and drop an instance of our button and I

1881
01:16:32,520 --> 01:16:37,719
select this Frame and I preview it here

1882
01:16:35,760 --> 01:16:40,000
like this obviously it's not a mobile

1883
01:16:37,719 --> 01:16:42,280
frame but that's fine if I just hover

1884
01:16:40,000 --> 01:16:45,320
over it nothing happens because we

1885
01:16:42,280 --> 01:16:47,440
didn't make these variance interactive

1886
01:16:45,320 --> 01:16:49,080
so how can we do that well it's so

1887
01:16:47,440 --> 01:16:52,400
simple if you just head over to this

1888
01:16:49,080 --> 01:16:54,880
component set and we select our default

1889
01:16:52,400 --> 01:16:57,400
variant and then we head over to the pro

1890
01:16:54,880 --> 01:17:00,960
prototype tab here we can just connect

1891
01:16:57,400 --> 01:17:02,920
this first variant to our hover variant

1892
01:17:00,960 --> 01:17:06,400
like that and we are going to set the

1893
01:17:02,920 --> 01:17:08,960
trigger to while hovering and the

1894
01:17:06,400 --> 01:17:11,040
animation is going to be smart animate

1895
01:17:08,960 --> 01:17:12,840
you can set the duration here as well

1896
01:17:11,040 --> 01:17:14,960
I'm going to leave it as e and then I'm

1897
01:17:12,840 --> 01:17:17,560
going to select this hover variant and

1898
01:17:14,960 --> 01:17:19,360
just connect it to our press variant and

1899
01:17:17,560 --> 01:17:22,719
this time the trigger is going to be

1900
01:17:19,360 --> 01:17:25,280
untap like that and it should be smart

1901
01:17:22,719 --> 01:17:27,880
animate nice and now I'm going to select

1902
01:17:25,280 --> 01:17:29,760
this Frame three hit shift and space bar

1903
01:17:27,880 --> 01:17:32,120
and if I hover over this button look

1904
01:17:29,760 --> 01:17:34,679
what happens you see now it's

1905
01:17:32,120 --> 01:17:36,440
interactive now if I click on it we'll

1906
01:17:34,679 --> 01:17:38,280
see the press button of course we need

1907
01:17:36,440 --> 01:17:40,639
to set the animation in a different way

1908
01:17:38,280 --> 01:17:42,520
to make it work however I just wanted to

1909
01:17:40,639 --> 01:17:44,719
show you how you can make your

1910
01:17:42,520 --> 01:17:46,360
components interactive in figma all

1911
01:17:44,719 --> 01:17:48,320
right now let's say you're done with

1912
01:17:46,360 --> 01:17:50,400
your project and you want to share it

1913
01:17:48,320 --> 01:17:52,280
with your client or your other team

1914
01:17:50,400 --> 01:17:54,199
members how can you do that well there

1915
01:17:52,280 --> 01:17:56,600
are two things you can do you can either

1916
01:17:54,199 --> 01:17:59,000
download the figma file and save it as a

1917
01:17:56,600 --> 01:18:01,560
local copy on your computer and just

1918
01:17:59,000 --> 01:18:03,440
share it with your client or your team

1919
01:18:01,560 --> 01:18:05,159
members and then they can just import it

1920
01:18:03,440 --> 01:18:06,840
to their figma account and the way you

1921
01:18:05,159 --> 01:18:09,920
can do that is just head over to this

1922
01:18:06,840 --> 01:18:12,239
menu and from here you can just click on

1923
01:18:09,920 --> 01:18:14,239
Save local copy however there is a

1924
01:18:12,239 --> 01:18:16,320
better and more efficient way for

1925
01:18:14,239 --> 01:18:18,600
sharing your projects with others and

1926
01:18:16,320 --> 01:18:21,000
that is using the share button right

1927
01:18:18,600 --> 01:18:24,080
here if I click on this share button I

1928
01:18:21,000 --> 01:18:25,840
can invite others by name or email to

1929
01:18:24,080 --> 01:18:27,840
this project and basically I can

1930
01:18:25,840 --> 01:18:30,120
collaborate with other people

1931
01:18:27,840 --> 01:18:32,520
alternatively I can just copy the

1932
01:18:30,120 --> 01:18:35,360
project link and just share it with

1933
01:18:32,520 --> 01:18:37,280
others and then they can just join this

1934
01:18:35,360 --> 01:18:39,440
project but in order for them to be able

1935
01:18:37,280 --> 01:18:41,440
to edit your file you need to move your

1936
01:18:39,440 --> 01:18:43,600
draft to your projects and you can

1937
01:18:41,440 --> 01:18:44,960
easily do that using this button all

1938
01:18:43,600 --> 01:18:47,159
right now that you know how you can

1939
01:18:44,960 --> 01:18:49,199
share your project with others let's see

1940
01:18:47,159 --> 01:18:51,080
how you can ask for feedback let's say

1941
01:18:49,199 --> 01:18:53,360
you already shared your project with

1942
01:18:51,080 --> 01:18:55,120
other team members or maybe the project

1943
01:18:53,360 --> 01:18:57,440
manager and they want to give you some

1944
01:18:55,120 --> 01:19:00,040
feedback to do that they can simply

1945
01:18:57,440 --> 01:19:02,360
click on this icon comment and let's say

1946
01:19:00,040 --> 01:19:03,880
they want to comment on this button okay

1947
01:19:02,360 --> 01:19:06,560
they can just left click here for

1948
01:19:03,880 --> 01:19:09,800
example they could say this button could

1949
01:19:06,560 --> 01:19:11,600
use a darker shade of green and then

1950
01:19:09,800 --> 01:19:14,679
they can submit it you can head over to

1951
01:19:11,600 --> 01:19:17,320
the comments here and just write a reply

1952
01:19:14,679 --> 01:19:20,199
I'm going to type done and hit submit

1953
01:19:17,320 --> 01:19:22,360
like that and once the issue is resolved

1954
01:19:20,199 --> 01:19:24,840
you can just click on this Mark as

1955
01:19:22,360 --> 01:19:26,120
resolved icon like that and it will be

1956
01:19:24,840 --> 01:19:28,639
gone the next thing we are going to

1957
01:19:26,120 --> 01:19:31,400
discuss is constraints so what are

1958
01:19:28,639 --> 01:19:34,440
constraints let me draw a simple frame

1959
01:19:31,400 --> 01:19:37,440
right here and inside this Frame I'm

1960
01:19:34,440 --> 01:19:39,920
going to draw a simple shape okay maybe

1961
01:19:37,440 --> 01:19:41,960
a circle let me hold on the shift key

1962
01:19:39,920 --> 01:19:45,159
and draw a simple Circle right in the

1963
01:19:41,960 --> 01:19:47,199
middle and I'm going to change its color

1964
01:19:45,159 --> 01:19:49,000
okay can you see these blue dash lines

1965
01:19:47,199 --> 01:19:51,040
these are called constraints so

1966
01:19:49,000 --> 01:19:53,800
essentially constraints allow us to tell

1967
01:19:51,040 --> 01:19:56,600
figma how our elements or let's say how

1968
01:19:53,800 --> 01:19:59,719
our layers should behave in terms of

1969
01:19:56,600 --> 01:20:01,920
positioning and sizing when we start

1970
01:19:59,719 --> 01:20:04,400
resizing their parent element in this

1971
01:20:01,920 --> 01:20:06,920
case the parent element is this Frame

1972
01:20:04,400 --> 01:20:09,679
six let me just rename it to frame and

1973
01:20:06,920 --> 01:20:11,920
this circle is the child of this parent

1974
01:20:09,679 --> 01:20:15,199
frame so now as you can see the

1975
01:20:11,920 --> 01:20:17,280
constraints are set to top and left we

1976
01:20:15,199 --> 01:20:20,239
have many different options we have

1977
01:20:17,280 --> 01:20:22,159
right left and right center scale and

1978
01:20:20,239 --> 01:20:24,360
the same things for the vertical

1979
01:20:22,159 --> 01:20:26,719
constraints all right so let me show you

1980
01:20:24,360 --> 01:20:29,239
how it works when the constraints are

1981
01:20:26,719 --> 01:20:31,560
set to top and left it means that when

1982
01:20:29,239 --> 01:20:34,120
we start resizing this parent frame

1983
01:20:31,560 --> 01:20:37,040
figma maintains this layers position

1984
01:20:34,120 --> 01:20:39,760
relative to the top and left edges okay

1985
01:20:37,040 --> 01:20:43,040
so if I start resizing this frame look

1986
01:20:39,760 --> 01:20:45,960
what happens you see this element stays

1987
01:20:43,040 --> 01:20:49,400
where it is and it's not moving because

1988
01:20:45,960 --> 01:20:52,120
the constraints are set to top and left

1989
01:20:49,400 --> 01:20:54,679
if I set it to top and right look what

1990
01:20:52,120 --> 01:20:57,719
happens now if I start resizing this

1991
01:20:54,679 --> 01:20:59,880
this Frame you see now it starts moving

1992
01:20:57,719 --> 01:21:02,120
because now figma is maintaining this

1993
01:20:59,880 --> 01:21:05,199
element's position relative to the top

1994
01:21:02,120 --> 01:21:07,159
and right edges of this Frame okay so

1995
01:21:05,199 --> 01:21:09,120
that's how constraints work let's say

1996
01:21:07,159 --> 01:21:11,560
you want this element to be aligned

1997
01:21:09,120 --> 01:21:13,560
right at the center of this Frame and

1998
01:21:11,560 --> 01:21:15,760
you want it to stay at the center when

1999
01:21:13,560 --> 01:21:17,840
you start resizing the parent element

2000
01:21:15,760 --> 01:21:19,520
you can just align it to the center like

2001
01:21:17,840 --> 01:21:22,159
this and as you can see the constraints

2002
01:21:19,520 --> 01:21:24,840
are automatically set for you and now if

2003
01:21:22,159 --> 01:21:26,960
we try to resize the parent frame look

2004
01:21:24,840 --> 01:21:28,920
what happens you see now this circle

2005
01:21:26,960 --> 01:21:31,960
stays right at the center no matter the

2006
01:21:28,920 --> 01:21:35,159
parent Dimensions but apart from center

2007
01:21:31,960 --> 01:21:37,400
right left and top we also have left and

2008
01:21:35,159 --> 01:21:40,120
right and scale let me show you how

2009
01:21:37,400 --> 01:21:42,520
these two options work here if I set it

2010
01:21:40,120 --> 01:21:45,600
to left and right look what happens when

2011
01:21:42,520 --> 01:21:48,080
I resize this Frame you see now this

2012
01:21:45,600 --> 01:21:50,600
element is stretching but we also have

2013
01:21:48,080 --> 01:21:52,760
another option called scale it works

2014
01:21:50,600 --> 01:21:54,800
similarly to the left and right with a

2015
01:21:52,760 --> 01:21:57,800
small difference let me show you if I

2016
01:21:54,800 --> 01:22:00,840
set it to scale and I try to resize it

2017
01:21:57,800 --> 01:22:03,000
this element is still stretching however

2018
01:22:00,840 --> 01:22:05,159
figma will convert all the values like

2019
01:22:03,000 --> 01:22:06,920
the left and right margins here to a

2020
01:22:05,159 --> 01:22:09,239
percentage value so instead of having

2021
01:22:06,920 --> 01:22:11,159
pixel values we are working with

2022
01:22:09,239 --> 01:22:12,719
percentage values now let me show you

2023
01:22:11,159 --> 01:22:14,600
how you can actually use these

2024
01:22:12,719 --> 01:22:16,520
constraints when you're working on a

2025
01:22:14,600 --> 01:22:18,800
project so here we have this mobile

2026
01:22:16,520 --> 01:22:21,719
application and if I just select this

2027
01:22:18,800 --> 01:22:24,040
explore frame and I try to resize it if

2028
01:22:21,719 --> 01:22:27,000
I try to increase its height you see

2029
01:22:24,040 --> 01:22:28,960
that the T Bar here stays where it is

2030
01:22:27,000 --> 01:22:32,239
and it's not sticking to the bottom edge

2031
01:22:28,960 --> 01:22:34,560
of this Frame okay so what we need to do

2032
01:22:32,239 --> 01:22:36,800
is Select this tab bar and as you can

2033
01:22:34,560 --> 01:22:39,920
see the constraints are set to left and

2034
01:22:36,800 --> 01:22:42,880
top so if you just set it to left and

2035
01:22:39,920 --> 01:22:44,880
bottom now if we try to resize this

2036
01:22:42,880 --> 01:22:46,920
Frame this T Bar should stick to the

2037
01:22:44,880 --> 01:22:50,159
bottom edge of this frame look what

2038
01:22:46,920 --> 01:22:51,880
happens you see that it works perfectly

2039
01:22:50,159 --> 01:22:54,120
constraints are quite powerful and we

2040
01:22:51,880 --> 01:22:56,800
can combine them with other layout to

2041
01:22:54,120 --> 01:22:58,400
create fully responsive layouts in figma

2042
01:22:56,800 --> 01:23:00,239
the next topic we are going to discuss

2043
01:22:58,400 --> 01:23:02,239
is AI tools if you head over to the

2044
01:23:00,239 --> 01:23:04,440
toolbar right at the bottom and you see

2045
01:23:02,239 --> 01:23:06,560
this icon for your actions panel it

2046
01:23:04,440 --> 01:23:09,560
means that you've been granted access to

2047
01:23:06,560 --> 01:23:11,360
figma AI tools if not if you're seeing

2048
01:23:09,560 --> 01:23:13,880
another icon it means that you don't

2049
01:23:11,360 --> 01:23:16,639
have access to AI tools yet because AI

2050
01:23:13,880 --> 01:23:18,760
tools are not available to all users so

2051
01:23:16,639 --> 01:23:20,760
let's see what tools we have here I'm

2052
01:23:18,760 --> 01:23:23,520
going to open it up here is our actions

2053
01:23:20,760 --> 01:23:25,880
panel and right here you see we have a

2054
01:23:23,520 --> 01:23:28,520
few design tools tools we have a few

2055
01:23:25,880 --> 01:23:30,520
writing tools and image editing tools

2056
01:23:28,520 --> 01:23:32,800
okay here under the design tools we have

2057
01:23:30,520 --> 01:23:36,159
rename layers first draft add

2058
01:23:32,800 --> 01:23:38,320
interactions so what do they do this one

2059
01:23:36,159 --> 01:23:40,159
rename layers renames your layers

2060
01:23:38,320 --> 01:23:42,000
automatically in seconds and I'm sure

2061
01:23:40,159 --> 01:23:44,520
you know that many designers including

2062
01:23:42,000 --> 01:23:47,080
me are guilty of not naming our layers

2063
01:23:44,520 --> 01:23:49,600
properly when we go through the design

2064
01:23:47,080 --> 01:23:51,600
process and this option saves us so much

2065
01:23:49,600 --> 01:23:54,080
time so let me show you how it works

2066
01:23:51,600 --> 01:23:57,000
here what I'm going to do is Select

2067
01:23:54,080 --> 01:24:00,120
these frames okay maybe this one and I'm

2068
01:23:57,000 --> 01:24:02,800
going to click on rename layers okay and

2069
01:24:00,120 --> 01:24:05,800
as soon as I do that it starts renaming

2070
01:24:02,800 --> 01:24:07,840
all these layers inside this Frame

2071
01:24:05,800 --> 01:24:09,960
automatically that's so cool isn't it

2072
01:24:07,840 --> 01:24:12,159
make sure to give it a try what about

2073
01:24:09,960 --> 01:24:15,520
the next option the next option we have

2074
01:24:12,159 --> 01:24:18,000
here is first draft okay so this feature

2075
01:24:15,520 --> 01:24:21,400
lets you turn your ideas into ready

2076
01:24:18,000 --> 01:24:23,560
wireframes or High Fidelity designs in

2077
01:24:21,400 --> 01:24:25,560
seconds let me show you how it works

2078
01:24:23,560 --> 01:24:28,760
here right at the top you see we have a

2079
01:24:25,560 --> 01:24:31,639
few libraries okay we have basic app

2080
01:24:28,760 --> 01:24:34,159
components we have app wireframe basic

2081
01:24:31,639 --> 01:24:36,040
site and site wireframes okay depending

2082
01:24:34,159 --> 01:24:37,960
on your needs you can choose from one of

2083
01:24:36,040 --> 01:24:39,920
these libraries okay let's say you want

2084
01:24:37,960 --> 01:24:41,840
to create a basic app and you have no

2085
01:24:39,920 --> 01:24:44,760
idea how it should look in terms of

2086
01:24:41,840 --> 01:24:47,280
layout so what you can do is choose this

2087
01:24:44,760 --> 01:24:49,239
basic app library and then you can just

2088
01:24:47,280 --> 01:24:51,080
describe what you're looking for you can

2089
01:24:49,239 --> 01:24:53,840
type in whatever you like let's say you

2090
01:24:51,080 --> 01:24:58,800
want to design a fitness app so here I'm

2091
01:24:53,840 --> 01:25:00,880
going to type type an app for a

2092
01:24:58,800 --> 01:25:03,320
fitness

2093
01:25:00,880 --> 01:25:05,920
company okay then I'm going to hit make

2094
01:25:03,320 --> 01:25:08,280
it and then Figo will do its magic you

2095
01:25:05,920 --> 01:25:10,639
see now more and more elements are being

2096
01:25:08,280 --> 01:25:12,679
added to this Frame all right it's done

2097
01:25:10,639 --> 01:25:15,040
let's check it out here at the top we

2098
01:25:12,679 --> 01:25:17,320
have this heading then we have this

2099
01:25:15,040 --> 01:25:20,280
large picture which has been generated

2100
01:25:17,320 --> 01:25:23,080
by Ai and then we have a heading we have

2101
01:25:20,280 --> 01:25:25,520
the subtitle we have this description we

2102
01:25:23,080 --> 01:25:27,880
have a few icons then we have a few

2103
01:25:25,520 --> 01:25:29,840
buttons and finally we have this tab bar

2104
01:25:27,880 --> 01:25:32,159
it's not perfect but it gives us an idea

2105
01:25:29,840 --> 01:25:34,639
of how we can create a layout for this

2106
01:25:32,159 --> 01:25:37,040
app okay if you're not satisfied with

2107
01:25:34,639 --> 01:25:40,880
the color palettes you can choose one of

2108
01:25:37,040 --> 01:25:42,679
these for example this one or this one

2109
01:25:40,880 --> 01:25:44,600
just like that then you can hit make

2110
01:25:42,679 --> 01:25:46,600
changes and you can also change the

2111
01:25:44,600 --> 01:25:48,080
styling of your elements for example

2112
01:25:46,600 --> 01:25:50,280
here if you want your elements to be

2113
01:25:48,080 --> 01:25:52,239
sharp you can just decrease that if you

2114
01:25:50,280 --> 01:25:54,719
want them to be completely rounded you

2115
01:25:52,239 --> 01:25:56,760
can increase that just like that you see

2116
01:25:54,719 --> 01:25:58,520
that these buttons are now rounded as

2117
01:25:56,760 --> 01:26:00,639
well then here you can Define the

2118
01:25:58,520 --> 01:26:03,560
spacing whether you want to have more wi

2119
01:26:00,639 --> 01:26:05,880
space around your content or not

2120
01:26:03,560 --> 01:26:09,280
depending on the use case and finally

2121
01:26:05,880 --> 01:26:12,520
here you can change the font just like

2122
01:26:09,280 --> 01:26:14,800
that okay so that's basically how this

2123
01:26:12,520 --> 01:26:17,560
option works and as I showed you here we

2124
01:26:14,800 --> 01:26:19,440
have many other options for example if

2125
01:26:17,560 --> 01:26:22,360
you want to design a website you can

2126
01:26:19,440 --> 01:26:26,040
choose basic site and then you can just

2127
01:26:22,360 --> 01:26:29,520
type a landing page

2128
01:26:26,040 --> 01:26:32,000
for an interior design company all right

2129
01:26:29,520 --> 01:26:34,239
it's done here as you can see we have a

2130
01:26:32,000 --> 01:26:37,040
navigation bar at the top then we have

2131
01:26:34,239 --> 01:26:39,679
the hero section we have a large image

2132
01:26:37,040 --> 01:26:41,960
here looks good then we have the our

2133
01:26:39,679 --> 01:26:44,440
services section we also have the

2134
01:26:41,960 --> 01:26:46,440
testimonial and the fooder again as you

2135
01:26:44,440 --> 01:26:48,159
can see it's not perfect but it's a

2136
01:26:46,440 --> 01:26:51,280
start all right the next tool we are

2137
01:26:48,159 --> 01:26:53,159
going to discuss is make an image okay

2138
01:26:51,280 --> 01:26:54,679
using this tool you can describe what

2139
01:26:53,159 --> 01:26:56,520
kind of image you're looking for and

2140
01:26:54,679 --> 01:26:58,719
figma will generate it for you for

2141
01:26:56,520 --> 01:27:01,920
instance here I am going to hit Tab and

2142
01:26:58,719 --> 01:27:04,760
I'm going to hit make it like that and

2143
01:27:01,920 --> 01:27:06,760
see what it's going to create there it

2144
01:27:04,760 --> 01:27:09,199
is that's beautiful isn't it here we

2145
01:27:06,760 --> 01:27:12,000
have four options to choose from maybe

2146
01:27:09,199 --> 01:27:14,360
this one this one looks a bit better or

2147
01:27:12,000 --> 01:27:16,280
this one that's awesome now what about

2148
01:27:14,360 --> 01:27:18,639
the next tool the next tool we are going

2149
01:27:16,280 --> 01:27:20,400
to discuss is remove background this

2150
01:27:18,639 --> 01:27:22,199
tool as you can guess from its name

2151
01:27:20,400 --> 01:27:24,239
allows you to remove your image

2152
01:27:22,199 --> 01:27:26,440
backgrounds if I hit it look what

2153
01:27:24,239 --> 01:27:29,600
happens there it is the background is

2154
01:27:26,440 --> 01:27:31,600
gone all right what's next the next tool

2155
01:27:29,600 --> 01:27:34,679
we are going to discuss is this one

2156
01:27:31,600 --> 01:27:36,520
translate to which is so so helpful this

2157
01:27:34,679 --> 01:27:38,679
tool will translate your website's

2158
01:27:36,520 --> 01:27:40,880
content to any language you want in

2159
01:27:38,679 --> 01:27:42,239
seconds let me show you how it works

2160
01:27:40,880 --> 01:27:44,119
here I'm going to select this hero

2161
01:27:42,239 --> 01:27:45,920
section and I'm going to use this tool

2162
01:27:44,119 --> 01:27:47,960
translate to and then I'm going to

2163
01:27:45,920 --> 01:27:50,920
choose from one of these supported

2164
01:27:47,960 --> 01:27:53,639
languages maybe German and look what

2165
01:27:50,920 --> 01:27:56,280
happens you see that all our text within

2166
01:27:53,639 --> 01:27:58,520
our hero section have been translated to

2167
01:27:56,280 --> 01:28:00,560
German that's awesome isn't it we have a

2168
01:27:58,520 --> 01:28:03,239
few other tools as well that we're not

2169
01:28:00,560 --> 01:28:05,600
going to discuss now such as this find

2170
01:28:03,239 --> 01:28:07,840
option or rewrite this you can check

2171
01:28:05,600 --> 01:28:10,920
them out but I'm sure you've got an idea

2172
01:28:07,840 --> 01:28:12,880
of how these AI tools work and last but

2173
01:28:10,920 --> 01:28:15,600
not least we are going to discuss the

2174
01:28:12,880 --> 01:28:19,000
dev mode so what's the dev mode well the

2175
01:28:15,600 --> 01:28:20,840
dev mode simplifies our hand of process

2176
01:28:19,000 --> 01:28:23,000
what do I mean by that once you're done

2177
01:28:20,840 --> 01:28:24,960
designing a project you usually hand it

2178
01:28:23,000 --> 01:28:27,360
over to a developer or a team of

2179
01:28:24,960 --> 01:28:29,719
developers so that they can turn your

2180
01:28:27,360 --> 01:28:31,600
design to code right and then the

2181
01:28:29,719 --> 01:28:34,040
developers need to get access to your

2182
01:28:31,600 --> 01:28:36,199
project and just inspect it and try to

2183
01:28:34,040 --> 01:28:38,520
convert everything to code using Dev

2184
01:28:36,199 --> 01:28:41,040
mode the handoff process will be much

2185
01:28:38,520 --> 01:28:43,600
smoother why because here the developer

2186
01:28:41,040 --> 01:28:46,560
can easily select any element and on the

2187
01:28:43,600 --> 01:28:48,600
right side he or she can see all the CSS

2188
01:28:46,560 --> 01:28:50,760
properties depending on the platform

2189
01:28:48,600 --> 01:28:54,119
you're designing for for example if it's

2190
01:28:50,760 --> 01:28:56,639
a website they can choose CSS if it's a

2191
01:28:54,119 --> 01:29:00,000
mobile application for example iOS they

2192
01:28:56,639 --> 01:29:01,880
can specify Swift UI or UI kit let me

2193
01:29:00,000 --> 01:29:03,639
show you and they'll see the relevant

2194
01:29:01,880 --> 01:29:05,880
code here let's say they want to learn

2195
01:29:03,639 --> 01:29:07,960
more about the spacing of your elements

2196
01:29:05,880 --> 01:29:09,520
in that case they can just hover over

2197
01:29:07,960 --> 01:29:11,320
these elements and as you can see they

2198
01:29:09,520 --> 01:29:13,040
can quickly learn about the layout for

2199
01:29:11,320 --> 01:29:17,119
example here the margin between these

2200
01:29:13,040 --> 01:29:19,480
menu items is set to 40 right and here

2201
01:29:17,119 --> 01:29:22,239
the margin between this heading and this

2202
01:29:19,480 --> 01:29:23,760
top navigation bar is set to 70 but Dev

2203
01:29:22,239 --> 01:29:25,560
mode is much more than that if you want

2204
01:29:23,760 --> 01:29:27,520
to learn more about Dev mode make sure

2205
01:29:25,560 --> 01:29:29,560
to check out the dedicated video I

2206
01:29:27,520 --> 01:29:31,239
created about it on my channel if you

2207
01:29:29,560 --> 01:29:33,280
want to learn more about UI design

2208
01:29:31,239 --> 01:29:35,119
principles and become a professional UI

2209
01:29:33,280 --> 01:29:36,920
designer make sure to check out this

2210
01:29:35,119 --> 01:29:38,719
video thank you so much for watching

2211
01:29:36,920 --> 01:29:40,639
this video if you found it helpful

2212
01:29:38,719 --> 01:29:43,119
please hit the like button and subscribe

2213
01:29:40,639 --> 01:29:47,199
to my channel for More Design tutorials

2214
01:29:43,119 --> 01:29:47,199
have a great day and see you soon